How to reference 'this' within a d3 callback when using Angular 7

Question

How to reference 'this' within a d3 callback when using Angular 7

In an Angular directive, I am trying to access a class-level variable inside a callback function. To achieve this, I used an arrow function but the 'this' keyword is still not pointing to the directive.

this.itemRects.selectAll('rect')
            .data(this.visItems, (d) => {
                return d.id + this.x;
            })

I added a debugger at the return statement, and upon inspection it shows that 'this' is referring to the data array rather than the directive itself.

Is there a way to correctly access the directive level 'this' inside the callback function?

javascript angular typescript

Answer 1

Answer №1

When working within a callback function, the keyword 'this' refers to the callback function object. To access class variables within the callback function, you can declare a variable outside of the function like so:

var self = this;

Then, use 'self' instead of 'this' to reference class variables in the callback function.

To learn how to bind class variables in a callback function using arrow symbols, please refer to the following link: How to use arrow functions (public class fields) as class methods?

Here's an example:

this.itemRects.selectAll('rect')
            .data(this.visItems, (d,x) => {
                return d.id + x;
            })

Answer 2

When working within a callback function, the keyword 'this' refers to the callback function object. To access class variables within the callback function, you can declare a variable outside of the function like so:

var self = this;

Then, use 'self' instead of 'this' to reference class variables in the callback function.

To learn how to bind class variables in a callback function using arrow symbols, please refer to the following link: How to use arrow functions (public class fields) as class methods?

Here's an example:

this.itemRects.selectAll('rect')
            .data(this.visItems, (d,x) => {
                return d.id + x;
            })

How to reference 'this' within a d3 callback when using Angular 7

Answer №1

Similar questions

The only information returned from calling mongoose's Model.save() method are the fields { _id, __

Create a new webpage following the slug

Make sure to save the data in a file correctly by utilizing JSON.stringify before storing

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

Optimizing Performance by Managing Data Loading in JavaScript Frameworks

Troubleshooting TextField malfunctioning after button click within Dialog on Material UI

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?

How can validation of input fields be implemented in React Js?

Is there a way to consistently trigger the browser.webRequest.onBeforeRequest event in Mozilla Firefox when it is launched via a link?

Is it possible to transform an array of objects into a new array of objects?

Looking for a rival on socket.io

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

Strategies for implementing ID passing in Angular's Ngrx effects

Tips for transferring a variable from a webpage's JavaScript to Node.js

Displaying/Concealing specific choices using jQuery

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

Steps to create a toggle click event

Error in Material UI when using the select component

Tracking mouse positions across an HTML document

Utilizing model associations in Sails.js to populate an array