¿Cómo traducir 'this' en D3 JavaScript a TypeScript?

Sé que 'this' en JavaScript tiene un significado diferente que en TypeScript, según este artículo 'this' en TypeScript. Tengo el siguiente código en JavaScript usado para crear un trazo más grueso en el nodo seleccionado y dar a todos los demás nodos un trazo más pequeño.

node.on('click', function (d) {
   d3.selectAll('circle').attr('stroke-width', 1.5);
   d3.select(this).select('circle').attr('stroke-width', 5);
})

En TypeScript tengo

this.node.on('click', (d:any) => {
   this.node.selectAll('circle').attr('stroke-width', 1.5);
   [this is where I need help].select('circle').attr('stroke-width', 5);
}

Respuesta #1

Como ya se afirmó en este comentario y en esta respuesta, this no tiene un significado diferente entre JavaScript y TypeScript.

Dicho esto, tu problema aquí es mucho más prosaico: estás tratando de usar this en una función flecha para obtener el elemento DOM actual, y eso simplemente no funcionará.

Entonces, en pocas palabras, el problema aquí es la diferencia de this entre una función flecha y una función regular, no entre TypeScript y JavaScript.

Solución

Hay una alternativa a this, descrita en todas partes en la API: cuando utilizas una función anónima en la mayoría de los métodos de D3, los argumentos que se pasan son...

... el dato actual (d), el índice actual (i) y el grupo actual (nodos), con this como el elemento DOM actual (nodos[i]).

Así, this es simplemente el índice actual (el segundo argumento) de los grupos de nodos (el tercer argumento).

Entonces, en el fragmento de código a continuación:

selection.on("foo", function (d, i, n){
    console.log(this)
    console.log(n[i])
})

Los dos console.log devolverán lo mismo.

Como estás usando una función flecha, la solución es (en JavaScript):

this.nodes.on("click", (d, i, n) => {
    d3.select(n[i])//rest of your code here
})

Si quieres leer más sobre el uso del segundo y tercer argumento para obtener el elemento DOM, echa un vistazo a este ejemplo: d3 v4 recuperar el objetivo DOM de arrastre desde la función de devolución de llamada de arrastre cuando `this` no está disponible