How to translate 'this' in D3 JavaScript to TypeScript?

Question

I know that 'this' in JavaScript has a different meaning than in in TypeScript, as per this article 'this' in TypeScript. I have the following code in JavaScript used to create a thicker stroke on the selected node, and give all other nodes a smaller stroke.

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

In TypeScript I have

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

Answer 1

As already stated in this comment and this answer, this does not have a different meaning between JavaScript and TypeScript.

That being said, your problem here is way more prosaic: you're trying to use this in an arrow function to get the current DOM element, and that will simply not work.

So, in a nutshell, the problem here is the difference of this between an arrow function and a regular function, not between TypeScript and JavaScript.

Solution

There is an alternative to this, described everywhere in the API: when you use an anonymous function in most of D3 methods, the arguments being passed are...

... the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).

Thus, this is simply the current index (the second argument) of the nodes groups (the third argument).

So, in the snippet below:

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

The two console.log will return the same thing.

As you are using an arrow function, the solution is (in JavaScript):

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

If you want to read more about the use of the second and the third arguments to get the DOM element, have a look at this example: d3 v4 retrieve drag DOM target from drag callback when `this` is not available

Answer 2

The premise of this question, How to translate 'this' in D3 JavaScript to TypeScript?, is false. I did not downvote because it is important to educate.

I just want to clarify that this is 100% identical in TypeScript and JavaScript

In fact, all TypeScript syntax that is also valid JavaScript syntax has the exact same semantics.

This is what makes TypeScript a superset of JavaScript.

Update: I actually will amend this with an answer because the problem was that you thought the meaning was different. You are confused about arrow function syntax

(params) => expression or block

First of all => is not a TypeScript feature, but a JavaScript feature.

Secondly, TypeScript, as noted above naturally support both forms. This means that no translation is needed.

this means the same thing in TypeScript as it does in JavaScript.

In both languages it means something different in the context of => than it does in the context of function. There are many, many answers explaining this on SO, so I won't repeat them.

So here is the answer to this question.

If you have this file:

d3-app.js

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

It works and you want to rewrite it in TypeScript.

Here is what you do:

1. rename d3-app.js to d3-app.ts

That is all.

Answer 3

The answer was to replace 'this' with 'd3.event.currentTarget'

d3.select(d3.event.currentTarget).select('circle').attr('stroke-width', 5);