Get hovered element d3 v4

Question

svg.append('circle')
    .attr('class', 'points')
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.close))
    .attr("r", 10)
    .attr("fill", "#364652")
    .on('mouseover', (d, i) => {
          console.log(this)
     })

In the example above - this returns window, so d3.select(this) inside of that function is not working, like it did in v3 version examples.

How can i get element, that been hovered with the mouse?

score 0 · Answer 1 · answered Dec 03 '18 at 20:25

0

I've just noticed that i'm using arrow function, so it binds context on creation.

If you want to get element that triggered event, you should use regular function expression:

svg.append('circle')
    .attr('class', 'points')
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.close))
    .attr("r", 10)
    .attr("fill", "#364652")
    .on('mouseover', function (d, i) {
          console.log(this)
     })

answered Dec 03 '18 at 20:25

Src

5,252
5
28
56

an arrow function does **not** bind this – rioV8 Dec 03 '18 at 21:40
2

@rioV8 rly? any links? – Src Dec 03 '18 at 21:58
maybe in the docs about JavaScript. search "JavaScript Arrow Function" – rioV8 Dec 04 '18 at 02:01
2

@rioV8, yep, I’ve read that already, and docs are saying that it gets binded where it’s declared. – Src Dec 04 '18 at 06:16

Get hovered element d3 v4

1 Answers1