javascript - D3.js:使用元素位置而不是鼠标位置定位工具提示？

Question

我正在使用 D3 绘制散点图。当用户将鼠标悬停在每个圆圈上时，我想显示工具提示。

我的问题是我可以附加工具提示，但它们是使用鼠标事件 d3.event.pageX 和 d3.event.pageY 定位的，所以它们是在每个圆圈上的定位不一致。

相反，有些稍微偏向圆圈左侧，有些偏向右侧 - 这取决于用户的鼠标进入圆圈的方式。

这是我的代码:

circles
  .on("mouseover", function(d) {         
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });

并且是一个显示问题的 JSFiddle:http://jsfiddle.net/WLYUY/5/

有什么方法可以使用圆心本身作为定位工具提示的位置，而不是鼠标位置？

Answer 1

在您的特定情况下，您可以简单地使用 d 来定位工具提示，即

tooltip.html(d)  
  .style("left", d + "px")     
  .style("top", d + "px");

为了使这更通用一些，您可以选择鼠标悬停的元素并获取其坐标以定位工具提示，即

tooltip.html(d)  
  .style("left", d3.select(this).attr("cx") + "px")     
  .style("top", d3.select(this).attr("cy") + "px");