Question

我需要在圆圈上显示鼠标悬停的工具提示。我使用d3.mouse(this)来获取坐标，并将这些坐标分配给left和top样式属性position:absolute div，这使得它成为正确的工具提示。< / p>

 .on('mouseover', function (d) {
    coordinates = d3.mouse(this);       
    d3.select("#tooltip")
    .style("left", coordinates[0] + padding.x + "px")
    .style("top", coordinates[1] + padding.y + "px")
    .select("#info")
    .text(tooltipText(d));

我有一个包装器div并且具有宽度和溢出属性。当我向右滚动并悬停在圆圈上时，悬停将显示在其他位置（页面加载时圆圈的坐标）。

#outerWrapper{
  border: 1px solid black;
  width: 560px;
  overflow: auto;
}

当我删除上面的CSS时，它的工作正常，但我需要外包装有固定的宽度。

这个问题有没有解决办法。

您可以找到代码here

Answer 1

您可以使用clientX对象中的clientY和d3.event属性：

.on('mouseover', function (d) {
  d3.select("#tooltip")
    .style("left", d3.event.clientX + "px")
    .style("top", d3.event.clientY + "px")
    .select("#info")
    .text(tooltipText(d));

  d3.select("#tooltip").classed("hidden", false);
})

检查updated fiddle。

如果外包装宽度固定且滚动，则d3.mouse（this）坐标不正确

1 个答案: