Wie kann ich innerhalb eines D3 Callbacks auf die aktuelle Auswahl zugreifen?

Question

Wie kann ich innerhalb eines D3 Callbacks auf die aktuelle Auswahl zugreifen?

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

Ich könnte ein d3.select('.tick') in den Rückruf tun, da bis dahin habe ich eine Klasse hinzugefügt und die Knoten über d3.select bekommen können, aber was ist, wenn ich nicht die Klasse hinzugefügt haben?

Answer 1

Das Problem hier ist die Verwendung einer Pfeilfunktion, um auf this zuzugreifen.

es sein sollte:

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

Sehen Sie hier die Dokumentation über Pfeil-Funktionen in Bezug auf this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Dort heißt es:

Ein Pfeil Funktion Ausdruck eine kürzere Syntax im Vergleich zur Funktion Ausdrücke und bindet lexikalisch den Wert (bindet nicht sein eigenes this, arguments, super oder new.target).

Um den aktuellen DOM-Element this in einem Pfeil Funktion zu erhalten, kombiniert, um die zweite und dritte Argument verwenden:

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