Question

我想调整这个grouped bar chart 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;
}

但这并不理想，因为它部分地掩盖了障碍。我真正想做的是在所选栏的顶部显示工具提示 - Google Charts的工作方式：https://developers.google.com/chart/interactive/docs/gallery/columnchart#Example

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

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

Answer 1

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

使用绝对像素位置在条形图上方显示工具提示？

1 个答案: