46

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

4 回答 4

32

在您的特定情况下，您可以简单地使用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");
于 2013-04-27T20:55:24.000 回答
19

在这里找到了一些可以解决您的问题的东西，即使它们<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");
})
于 2014-06-04T15:48:57.693 回答
3

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

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

于 2020-03-01T05:59:43.073 回答
0

我是 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");})
于 2016-02-07T00:36:10.717 回答