2

Trying to learn d3 (v5) here

I'm trying to add an event listener to a group of path of voronoi that I generated.

I wanted to use d3 mouse event but i couldn't access the element that trigger the event.

Here is the code:

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 just gave me the whole window, I also tried using d3.mouse(this), which i saw in some v3,4 examples, but it gave me this error

Uncaught TypeError: t.getBoundingClientRect is not a function
also tried d3.svg.mouse(this)
Uncaught TypeError: d3.svg.mouse is not a function
I also tried d3.touch(this), because... why not and it just return null

I want to try to access the path that the mouse is over, and change the style/attribute. i know i can do it in css, but I'm learning d3, so I would like to know how to do that.
thank you all


github link to the code: https://github.com/Sidchou/d3-exercise

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
Sid Chou
  • 131
  • 1
  • 2

1 Answers1

2

Try to use the standard function, because arrow functions use the outer lexical scope:

.on("mousemove", function(){ console.log(this) })
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • OMG that worked!! thank you! i thought they usually use arrow function for d3 >< also, i found out that ```d3.event.target``` will work too, but its good to know – Sid Chou Apr 06 '20 at 00:57