javascript - d3 鼠标事件返回元素

Question

这个问题在这里已经有了答案:





Retrieve DOM target from drag callback when `this` is not available

(1 个回答)


去年关闭。




尝试在这里学习 d3 (v5)

我正在尝试将事件监听器添加到我生成的一组 voronoi 路径中。

我想使用 d3 鼠标事件，但我无法访问触发事件的元素。

这是代码:

svg
.append("g")
.attr("class","cells")
.selectAll("path")
.data(voronoi.polygons(vertices))
.enter().append("path")
.attr("d",(d)=>{return "M" + d.join("L") + "Z"})
.on("mousemove",()=>{console.log(this)})

consol.log 只是给了我整个窗口，我也尝试使用 d3.mouse(this)，我在一些 v3,4 示例中看到过，但它给了我这个错误
Uncaught TypeError: t.getBoundingClientRect is not a function也试过 d3.svg.mouse(this) Uncaught TypeError: d3.svg.mouse is not a function我也试过 d3.touch(this)，因为...为什么不
它只是返回 null

我想尝试访问鼠标经过的路径，并更改样式/属性。
我知道我可以在 css 中做到这一点，但我正在学习 d3，所以我想知道如何做到这一点。

谢谢你们
代码的github链接:
https://github.com/Sidchou/d3-exercise

Answer 1

尝试使用标准函数，因为箭头函数使用外部词法范围:

.on("mousemove", function(){ console.log(this) })