How do I translate 'this' in D3 JavaScript to TypeScript?
I know that 'this' in JavaScript has a different meaning than in TypeScript, as in this article 'this' in TypeScript . I have the following code in JavaScript used to create a thicker stroke on a 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);
}
source to share
As discussed in this comment and this answer , this
does not have a different meaning between JavaScript and TypeScript.
That being said, your problem here is more prosaic: you are trying to use this
arrows in a function to get the current DOM element, and it just won't work.
So, in a nutshell, the problem here is the difference this
between an arrow function and a regular function, not between TypeScript and JavaScript.
Decision
There is an alternative this
, described throughout the API: when you use an anonymous function in most D3 methods, the arguments passed ...
... the current value (d), the current index (i) and the current group (s), with the
this
current DOM element (nodes [i]) as the current element.
Thus, this
is just the current index (second argument) of the nodegroups (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.
When you use the arrow function, this is the solution (in JavaScript):
this.nodes.on("click", (d, i, n) => {
d3.select(n[i])//rest of your code here
})
If you want to know more about using the second and third arguments to get a DOM element, have a look at this example: d3 v4 get drag DOM target from drag callback when `this` is not available
source to share
The premise of this question, how to translate "this" in D3 JavaScript to TypeScript ?, is incorrect. I didn’t lower my voice because it’s important for learning.
I just want to clarify that it this
is 100% identical in TypeScript and JavaScript
In fact, all TypeScript syntax, which is also valid JavaScript syntax, has exactly the same semantics.
This is what makes TypeScript a superset of JavaScript.
Update: I'll actually fix this with the answer because the problem was that you thought the meaning was different. You are not sure about the syntax of the arrow function
(params) => expression or block
First of all, =>
it is not a TypeScript function, but a JavaScript function.
Second, TypeScript, as noted above, naturally supports both forms. This means no translation is required.
this
means the same thing in TypeScript as it does in JavaScript.
In both languages, it means something different in context =>
than in context function
. There are many, many answers explaining this on SO, so I won't repeat them.
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's what you do:
- rename d3-app.js to d3-app.ts
That's all.
source to share