d3.js - 将 HTML div 覆盖居中放置在 SVG 图表上

Question

我有一个用 D3 绘制的 SVG 饼图，我有一个小的 HTML div，当鼠标悬停在饼图的各个切片上时，它应该会出现，如下所示:

http://jsfiddle.net/adamehirsch/bzSpW/

问题在于定位 HTML 覆盖。目前，我必须相对于整个页面明确定位它。下面出现在 javascript 的第 145 行左右:

d3.select("#bracketsTip")
    .style("left", "420px") // this is dumb
    .style("top", "320px")  // and unnecessary, I'm sure
.transition()
    .duration(250)
    .style("opacity", 1.0);

我正在寻找一种方法，让 HTML div 出现在饼图的中心，而不必自己指定像素偏移。建议？

Answer 1

我注意到你在你的 fiddle 中加载了 jQuery。你可以这样做:

var leftPos = width / 2 - $("#bracketsTip").width() / 2
  , topPos = height / 2;

    d3.select("#bracketsTip")
        .style("left", leftPos + "px")
        .style("top", topPos + "px")
    .transition()
        .duration(250)
        .style("opacity", 1.0);

现在，如果您更改饼图的宽度和高度，叠加层将保持居中。