d3.js 滚动页面时的鼠标指针坐标答案

【问题标题】：d3.js mouse pointer coordinates when scrolling the paged3.js 滚动页面时的鼠标指针坐标
【发布时间】：2021-09-15 22:55:17
【问题描述】：

我有一个工具提示，当用户将鼠标悬停在条形图上时会出现。当在不滚动页面的情况下访问 svg 元素时，它可以正常工作。但是如果我滚动然后悬停，我的工具提示的位置就不能正常工作。

这是一个例子。（滚动到底部时，工具提示会出现在页面中间的某处。）

https://jsfiddle.net/vbgL0ace/47/

let main = d3.select("#main")
let data = [{y: 1, name: "John"}, {y: 200, name: "John"}]
let yaxisScale = d3.scaleLinear().range([0, 980]).domain(d3.extent(data, d=> d.y))

function showToolTip(d, coords) {
  d3.select("#tooltip")
    .style("display", "block")
    .text(d.name)
    .style("top", coords[1]+ "px")
    .style("left", coords[0]+ "px");
}

main.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d) => yaxisScale(+d.y))
.attr("height", 20)
.attr("width", 200).on("mouseenter", (d) => 
    showToolTip(d, [d3.event.clientX, d3.event.clientY])
)
.on("mousemove", (d) =>
    showToolTip(d, [d3.event.clientX, d3.event.clientY])
)
.on("mouseleave", (d) => d3.select("#tooltip").style("display", "none"));

有人可以就如何解决此工具提示行为提供帮助吗？谢谢

【问题讨论】：

标签： javascript css d3.js

【解决方案1】：

clientX 和 clientY 返回相对于视口的位置，因此不考虑滚动。

尝试使用pageX 和pageY 代替它给出相对于整个文档的位置。

.attr("width", 200).on("mouseenter", (d) => 
    showToolTip(d, [d3.event.pageX, d3.event.pageY])
)
.on("mousemove", (d) =>
    showToolTip(d, [d3.event.pageX, d3.event.pageY])
)

【讨论】：