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

【问题标题】：D3.js: Position tooltips using element position, not mouse position?D3.js：使用元素位置而不是鼠标位置定位工具提示？
【发布时间】：2013-04-21 19:25:23
【问题描述】：

我正在使用 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/

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

【问题讨论】：

如果您对任何类型的工具提示都满意，this answer 应该会有所帮助。
谢谢！如果可能的话，我更喜欢使用纯 D3 工具提示而不是醉意。

标签： javascript d3.js tooltip

【解决方案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 以将工具提示置于其上方。

【讨论】：

【解决方案2】：

我是 D3 的新手，所以这可能不适用于散点图...但发现它似乎适用于条形图...其中 v1 和 v2 是正在绘制的值.. 它似乎在查找值来自数据数组。

.on("mouseover", function(d) {
                  divt .transition()
                      .duration(200)
                      .style("opacity", .9);
                  divt .html(d.v1)
                      .style("left", x(d.v2)+50 + "px")
                      .style("top",y(d.v1)+ "px");})

【讨论】：

【解决方案3】：

找到了一些 here 可能解决您的问题的东西，即使 <body> 和 <svg> 有不同的定位。这是假设您为工具提示设置了absolute 位置。

.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");
})

【讨论】：

正是我所需要的。谢谢！
接受的解决方案与您的添加不完整。

【解决方案4】：

在您的特定情况下，您可以简单地使用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");

【讨论】：

谢谢 - 恐怕只有在 <body> 和 <svg> 元素具有相同的位置时才可以使用 d3.select(this).attr("cx")。见jsfiddle.net/WLYUY/6
如果有其他内容，还得在位置加上SVG的偏移量，见jsfiddle.net/WLYUY/7
偏移解决方案对我有用。谢谢拉斯。现在我在引导列网格中使用可视化，但偏移不受新定位的影响。我该如何解决这个问题？
不确定，需要查看完整示例。您可能想就此提出一个单独的问题。
我想出了这个：var matrix = this.getScreenCTM().translate(+this.getAttribute("cx"),+this.getAttribute("cy"));tip .style("left", (window.pageXOffset + matrix.e) + "px").style("top", (window.pageYOffset + matrix.f + 30) + "px");