D3。js：使用元素位置而不是鼠标位置来定位工具提示？

Question

我用D3画了一个散点图。我想在用户将鼠标移到每个圆上时显示工具提示。

我的问题是我可以附加工具提示，但它们是使用鼠标事件d3定位的。事件第X页和第d3页。事件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

根据我的经验，最简单的解决办法如下：

首先，getBoundingClientRect（）获取元素的位置。

然后，使用window.pageYOffset调整高度，相对于你所在的位置。

例如。

.on('mouseover', function(d) {
    let pos = d3.select(this).node().getBoundingClientRect();
    d3.select('#tooltip')
        .style('left', `${pos['x']}px`)
        .style('top', `${(window.pageYOffset  + pos['y'] - 100)}px`);
})

在上面的例子中，我不使用X的偏移量，因为我们很少需要这样做（除非您水平滚动）。

添加window.pageYOffset和pos['y']将为我们提供当前鼠标位置（无论我们在页面上的任何位置）。我减去100，把工具提示放在它上面一点。

Answer 2

在这里找到了一些即使

.on("mouseover", function(d) {
    var matrix = this.getScreenCTM()
        .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
    tooltip.html(d)
        .style("left", (window.pageXOffset + matrix.e + 15) + "px")
        .style("top", (window.pageYOffset + matrix.f - 30) + "px");
})

Answer 3

在特定情况下，您只需使用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");