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

IT技术 javascript d3.js tooltip
2021-02-27 19:22:02

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

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

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");
如果有其他内容，需要在位置加上SVG的偏移量，参见jsfiddle.net/WLYUY/7
2021-04-28 19:22:02
我想出了这个： <code>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");</code>
2021-05-06 19:22:02
不确定，需要看一个完整的例子。您可能想就此提出一个单独的问题。
2021-05-13 19:22:02
谢谢 - 恐怕d3.select(this).attr("cx")仅当<body>和<svg>元素具有相同的定位时才有效。参见jsfiddle.net/WLYUY/6
2021-05-21 19:22:02
带偏移的解决方案对我有用。谢谢拉斯。现在我在引导列网格中使用可视化，但偏移量不受新定位的影响。我怎样才能解决这个问题？
2021-05-21 19:22:02

找到了这里，可能解决你的问题，即使<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");
})
正是我所需要的。谢谢！
2021-05-11 19:22:02
添加后接受的解决方案并不完整。
2021-05-14 19:22:02

根据我的经验，简单的解决方案如下：

首先，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 将工具提示放在它的上方一点。

我是 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");})
其它你可能感兴趣的问题
上一篇在 AngularJS 中设置应用程序范围的 HTTP 标头 下一篇在指令中使用 ng-transclude 进行 ng-repeat