2

我有一个用 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 以饼图为中心显示，而无需自己指定像素偏移量。建议？

4

1 回答 1

3

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

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

于 2013-07-28T21:01:40.210 回答