d3.js - Wie kann man den TypeScript-‚this‘-Bereich aus einer d3-Funktion wiederherstellen?

D3 überschreibt die Variable 'this', sodass Sie die aktuelle Auswahl sehen können, während Sie sich in verschiedenen Methoden befinden.

Ich benötige auch 'this', um auf Klassenmitglieder-Eigenschaften in TypeScript zuzugreifen. Ich bin mir derzeit unsicher, wie ich beides behalten kann, wann immer ich sie brauche.

tweenArc(datum: any, index: number, attr: string) {
    console.log(this);
    console.log(this.classVariable);
...
}

Das erste console.log wird die d3-Auswahl ausgeben, die in diesem Fall ein svg-Element ist.

Wenn ich jedoch versuche, auf Mitglieder-Eigenschaften aus der Klasse zuzugreifen, in der die Funktion definiert ist, kann ich dies nicht tun. Dieses console.log gibt undefined zurück.

Antwort #1

Eine Lösung, die mir eingefallen ist, besteht darin, die Art und Weise zu ändern, wie ich meinen Callback definiere. Anstatt den Callback als Funktion in der TypeScript-Klasse zu setzen, erstelle ich ihn inline mit einem Lambda, sodass ich Zugriff auf meine Selektion habe, die in der umschließenden Klasse definiert ist, sowie Zugriff auf die this-Variable der TypeScript-Klasse.

Wenn es einen besseren Weg gibt, würde ich gerne davon erfahren, da dies eine bestimmte Architektur erzwingt.

selection.transition()
            .duration(this.duration)
            .attrTween("d", (datum: any, index: number, attr: string) => {
                let previousEndAngle = parseFloat(selection.attr("endAngle"));
                let endAngle = this.d3Utility.arcPercentage(value, maxValue, startAngle, isClockwise, this.arcLength);
                let interpolator = d3.interpolate(previousEndAngle, endAngle);

                return (t: number): any => {
                    selection.attr("endAngle", interpolator(t));

                    return this.drawArc(startAngle, interpolator(t), radii[0], radii[1])(null);
                }
            });