CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
hzhu
hzhu

Reputation: 3799

How can I get access to the current selection inside a D3 callback?

How can I get access to the current selection inside a D3 callback?

group.selectAll('.text')
    .data(data)
    .enter()
    .append('text')
    .text((d) => d)
    .attr('class', 'tick')
    .attr('y', (d) => {
      // console.log(this) <-- this gives me window :( but I want the current selection or node: <text>
      return d
    })

I could do a d3.select('.tick') in the callback, since by then I've added a class and can get the node via d3.select, but what if I didn't add the class?

Upvotes: 4

Views: 1906

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The problem here is the use of an arrow function to access this.

It should be:

.attr("y", function(d){
    console.log(this);
    return d;
})

See here the documentation about arrow functions regarding this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

It says:

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target).

To get the current DOM element this in an arrow function, use the second and third arguments combined:

.attr("y", (d, i, n) => {
    console.log(n[i]);
    return n[i];
})

Upvotes: 7

Related Questions