D3.js 在SVG图表上居中放置HTML div覆盖

我有一个用D3绘制的SVG饼图，还有一个小的HTML div，当鼠标滑过饼图的各个部分时，应该会出现，如下所示：

问题在于如何定位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在饼图上居中显示，而不必自己指定像素偏移量。建议？

我注意到您的小提琴中加载了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);

---

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

在纯SVG中进行操作，将使您的生活更轻松。这正是我所希望的优雅解决方案。伙计，我甚至没有想过从jQuery中获取维度。掌纹