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

Question

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

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

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

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

Answer 1

clientX 和 clientY return 相对于 viewport 的位置，因此不考虑滚动。

尝试使用 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])
)

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

d3.js mouse pointer coordinates when scrolling the page

javascript

css

d3.js