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

Answer 2

即使<body>和<svg>具有不同的定位，也可以找到可能解决您问题的here内容。这假设您为工具提示设置了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");
})

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

Answer 4

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

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

4 个答案: