d3.js - Hur återfår man TypeScript 'this'-omfånget från en d3-funktion?

D3 skriver över variabeln 'this', vilket gör att du kan se det aktuella urvalet medan du är i olika metoder.

Jag behöver också 'this' för att få tillgång till klassmedlems egenskaper i TypeScript. Jag är för närvarande osäker på hur jag kan behålla båda när jag behöver dem.

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

Den första console.log kommer att skriva ut d3-selektionen, vilket i detta fall är ett svg-element.

Om jag försöker få åtkomst till medlems-egenskaper från klassen som funktionen är definierad i, kan jag dock inte. Den där console.log returnerar undefined.

Svar #1

En lösning jag har kommit på är att ändra sättet jag definierar min callback på. Istället för att lägga callbacken som en funktion i typescript-klassen, skapar jag den inline med en lambda, så jag har tillgång till mitt urval som definieras i omslutande klass, plus tillgång till this-variabeln i typescript-klassen.

Om det finns ett bättre sätt skulle jag vilja veta, eftersom detta tvingar fram en specifik arkitektur.

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