0

我想调整这个分组条形图D3.js 示例，以便在用户将鼠标悬停在其中一个条形上时显示工具提示。

我已经研究出如何显示相对于用户鼠标指针的工具提示，如下所示：

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 1e-6);
state.selectAll("rect")
  .data(function(d) { return d.ages; })
  ...
  .on("mouseover", function(d, i) {
    tooltip.transition()
      .duration(100)
      .style("opacity", 1);
    tooltip.html("hello world")
     .style("left", x + "px")
     .style("top", y + "px");
  });

// CSS
div.tooltip {
  position: absolute;
  width: 130px;
  height: 60px;
  background: #ddd;
}

但这并不理想，因为它部分掩盖了条形图。我真正想做的是在所选栏的顶部显示一个工具提示 - 谷歌图表的方式：https ://developers.google.com/chart/interactive/docs/gallery/columnchart#Example

有谁知道我不能得到鼠标的绝对 x/y 坐标，而是当前被鼠标悬停的块的绝对 x/y 像素坐标？然后我可以使用这些坐标来定位工具提示。

这是 jsfiddle 的开始（但由于访问控制，我无法加载数据）：http: //jsfiddle.net/YGjHT/1/

4

1 回答 1

0

当您创建矩形（并附加mouseover处理程序）时，您可以访问这些坐标，因为您正在设置它们。您需要做的就是在处理程序中使用它们。只需使用您在处理程序中设置矩形的坐标即可。

于 2012-11-16T22:32:27.140 回答