将SV 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

我注意到你的小提琴里装了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);

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