How to translate ‘this’ in D3 JavaScript to TypeScript?

by

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

More Related Contents:

  1. Using _ (underscore) variable with arrow functions in ES6/Typescript
  2. `this` is undefined in Dev Tools when using arrow function
  3. Should we use useCallback in every function handler in React Functional Components
  4. Use async await with Array.map
  5. How to avoid bind or inline arrow functions inside render method
  6. Why can I access TypeScript private members when I shouldn’t be able to?
  7. How to add a tooltip to an svg graphic?
  8. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  9. How to define type for a function callback (as any function type, not universal any) used in a method parameter
  10. Mongoose the Typescript way…?
  11. Extend native JavaScript array
  12. ESCMAScript 6 arrow functions – parentheses around parameter
  13. How are input parameters filled in javascript method chains?
  14. Load multiple files using the d3-fetch module
  15. TypeScript – Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type
  16. Plotting points on a map with D3
  17. Calling properly TypeScript code from JavaScript
  18. Cast int to enum strings in Typescript
  19. SVG to Canvas with d3.js
  20. TypeError: Class extends value undefined is not a function or null
  21. Storing Objects in localStorage
  22. Missing basic DOM types in TypeScript project
  23. TypeScript, Looping through a dictionary
  24. Performance penalty of creating handlers on every render with react-hooks
  25. Calculate SVG Path Centroid with D3.js
  26. Using d3 to shade area between two lines
  27. What’s the purpose of a leading pipe when declaring a type on Typescript
  28. D3: How do I set “click” event and “dbclick” event at the same time?
  29. How to import a js library without definition file in typescript file
  30. How to get the total depth of an unknown JSON hierarchy?

Leave a Comment