Hvordan oversette 'this' i D3 JavaScript til TypeScript?

Jeg vet at 'this' i JavaScript har en annen betydning enn i TypeScript, ifølge denne artikkelen 'this' i TypeScript. Jeg har følgende kode i JavaScript som brukes for å lage en tykkere strek på den valgte noden, og gi alle andre noder en mindre strek.

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

I TypeScript har jeg

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

Svar #1

Som allerede nevnt i denne kommentaren og dette svaret, har this ikke en annen betydning mellom JavaScript og TypeScript.

Når det er sagt, er problemet ditt her mye mer prosaisk: du prøver å bruke this i en arrow-funksjon for å få det nåværende DOM-elementet, og det vil rett og slett ikke fungere.

Så, kort sagt, problemet her er forskjellen på this mellom en pilfunksjon og en vanlig funksjon, ikke mellom TypeScript og JavaScript.

Løsning

Det finnes et alternativ til this, beskrevet overalt i API-en: når du bruker en anonym funksjon i de fleste av D3-metodene, er argumentene som blir sendt...

... det nåværende datumuttrykket (d), den nåværende indeksen (i), og den nåværende gruppen (nodes), med this som det nåværende DOM-elementet (nodes[i]).

Dermed er this ganske enkelt den nåværende indeksen (det andre argumentet) til nodegruppene (det tredje argumentet).

Så, i utdraget nedenfor:

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

De to console.log vil returnere det samme.

Siden du bruker en pilfunksjon, er løsningen (i JavaScript):

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

Hvis du vil lese mer om bruken av det andre og det tredje argumentet for å hente DOM-elementet, kan du se på dette eksempelet: d3 v4 hente dra DOM-mål fra dra-tilbakekall når `this` ikke er tilgjengelig

Relaterte artikler