Change current Element using d3

JavaScript
1

I want to change width and style of a rect element when it gets hover.

I tried this But didn’t work

d3.selectAll('rect')
    .data(dataset)
    ...
   ....
   .on('mouseover', (d, i) => {
             d3.select(this).attr('width', w + 10).style('stroke', 'black');
             // and this too
              this.attr('width',  w+ 10).style('stroke', 'black');
})

I’m using d3 v5

2

Use function instead.

function ( d, i ) {
... 
}
3

Wow!
Thanks it works
Can you tell me why it is working?

4

This happens because the arrow functions don’t bind their own this (or the arguments array!) unlike “normal” functions do. It’s a little tricky concept to catch at first, but you might read and do your tests to make the concept clear. I remember seen one of the books by Kyle Simpson (You Don’t Know Js) talking about that and also Eloquent JS explained it.

1 Like