Как получить доступ к текущему выбору внутри обратного вызова D3?

Question

Как я могу получить доступ к текущему выбору внутри обратного вызова D3?

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

Я мог бы сделать d3.select('.tick') в обратный вызов, так как к тому времени я добавил класс и может получить узел через d3.select, но что, если я не добавить класс?

Answer 1

Проблема заключается в использовании функции стрелки для доступа к this.

Оно должно быть:

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

Смотрите здесь документация о функциях стрелки относительно this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Он говорит: выражение функции

стрелки имеет более короткий синтаксис по сравнению с функцией выражения и лексически связывает это значение (не связывает его собственные, аргументы, супер или new.target).

Чтобы получить текущий DOM элемент this в функции стрелки, использовать второй и третий аргументы в сочетании:

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