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

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

• javascript
• typescript
• d3.js
• arrow-functions
• lexical-scope

• 1 Why do you want it? Just use first snippet it's perfectly fine, you don't need arrow function syntax. – dfsq Commented Apr 21, 2017 at 19:19
• Because 'this' doesn't mean the same in JavaScript than it does in TypeScript and I'm trying to find the "correct" way of achieving the JavaScript code for an Angular 2 application. – H. Trujillo Commented Apr 21, 2017 at 19:21
• 1 this has absolutely the same meaning an behavior in TS and JS. Would be interesting to see more code. It's strange that you use this.node as a replacement for d3 and for node simultaneously. Is it correct in your case? – dfsq Commented Apr 21, 2017 at 19:32
• @H.Trujillo That's not what that article says. It says that in JavaScript, as well as in TypeScript, this behaves differently from other languages. – artem Commented Apr 21, 2017 at 19:36
• 1 @dfsq unfortunately it's not possible to get the DOM element just using the d object (the first argument). However, the second and third arguments can be easily used to get this (which in D3 methods is the current DOM element). – Gerardo Furtado Commented Apr 22, 2017 at 9:31

3 Answers 3

As already stated in this ment 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

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.

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

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