d3.js - 将 HTML div 覆盖层置于 SVG 图表的中心

Question

我有一个用 D3 绘制的 SVG 饼图，并且有一个小的 HTML div，当鼠标悬停在饼图的各个切片上时，应该会出现该 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);

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