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

Question

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?

Answer 1

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];
})