D3 version 4 with Typescript - How "this" is used in the context of d3.drag().on("end", this.dragended)

Question

D3 version 4 with Typescript - How "this" is used in the context of d3.drag().on("end", this.dragended)

Currently, I am utilizing the D3 library for moving an element within a Venn diagram. Upon releasing the item after dragging, I aim to determine its position within the diagram.

item.call(d3.drag()
    .on("start", this.dragstarted)
    .on("drag", this.dragged)
    .on("end", this.dragended)
);

These functions are invoked when dragging begins, continues, and concludes.

dragended(d: TCMemberScenario, i: number) {
    d3.select(this).classed("active", false);
    d.calculateRoles();
    this.save();
}

Following the completion of dragging, this function is triggered. I perform some updates within the diagram and then try to call the save method, which is another method within the class. However, the 'this' variable is pointing to the D3 object rather than the class instance, resulting in a "Uncaught TypeError: Cannot read property 'save' of undefined" error.

Is there a way for me to access another method of my class from within the dragended function?

typescript d3.js

Answer 1

Answer №1

If you want to maintain a reference to 'this,' consider using arrow functions in the following way:

item.call(d3.drag()
    .on("start", (d, i) => this.dragstarted(d, i))
    .on("drag", (d, i) => this.dragged(d, i))
    .on("end", (d, i) => this.dragended(d, i))
);

Answer 2

If you want to maintain a reference to 'this,' consider using arrow functions in the following way:

item.call(d3.drag()
    .on("start", (d, i) => this.dragstarted(d, i))
    .on("drag", (d, i) => this.dragged(d, i))
    .on("end", (d, i) => this.dragended(d, i))
);

Answer 3

Answer №2

In order to maintain the reference to both the class instance and the element instance referenced by d3 drag, you can define your listener functions like this:

export class ExampleClass {
    @Input()
    radius: number = 45;

    constructor() {
        d3.drag()
          .on("start", this.dragStarted(this))
          .on("drag", this.dragged(this))
          .on("end", this.dragEnded(this));
    }

    private dragged(self) {
        return function(d) {
            // 'this' in this context will refer to the d3 element

            d3.select(this)
              .attr("cx", d.x = self.radius * Math.cos(alpha))
              .attr("cy", d.y = d3.event.y < 0 ? -self.radius * Math.sin(alpha) : self.radius * Math.sin(alpha));
        }
    }

    ...

}

Tested using d3.js version 4

Answer 4

In order to maintain the reference to both the class instance and the element instance referenced by d3 drag, you can define your listener functions like this:

export class ExampleClass {
    @Input()
    radius: number = 45;

    constructor() {
        d3.drag()
          .on("start", this.dragStarted(this))
          .on("drag", this.dragged(this))
          .on("end", this.dragEnded(this));
    }

    private dragged(self) {
        return function(d) {
            // 'this' in this context will refer to the d3 element

            d3.select(this)
              .attr("cx", d.x = self.radius * Math.cos(alpha))
              .attr("cy", d.y = d3.event.y < 0 ? -self.radius * Math.sin(alpha) : self.radius * Math.sin(alpha));
        }
    }

    ...

}

Tested using d3.js version 4

Answer 5

Answer №3

When working with D3, it is important to understand how the this context is handled in callbacks for selections, transitions, and similar operations. D3 binds the this context to the DOM element being operated on as a principle.

However, if you need to access the this context of a "wrapping object" within a lexical scope, using this directly will not work. In your specific case:

d3.select(this) will target the current DOM element being iterated, based on the type of the underlying DOM element in the item selection. For instance, if item is an SVGCircleElement, that will be the this context for your dragended function.
To access the wrapping object's this context, you can create a closure around the dragended function:

You can define a private method in the wrapping object with the save functionality:

private getDragEndedHandler() {
  let self = this; // preserve object context
  return function(d: TCMemberScenario, i: number) {
    d3.select(this).classed("active", false); // D3 bound DOM element context
    d.calculateRoles();
    self.save(); // object context preserved in closure
  }
}

When binding the event handler, you would then:

item.call(d3.drag()
    .on("start", this.dragstarted)
    .on("drag", this.dragged)
    .on("end", this.getDragEndedHandler())
);

This approach can also be implemented for other event handlers if necessary.

If you are using the latest types for d3-selection and d3-drag from npm, you will notice that they now offer generics for specifying the this context type related to DOM elements and D3 callbacks.

Answer 6

When working with D3, it is important to understand how the this context is handled in callbacks for selections, transitions, and similar operations. D3 binds the this context to the DOM element being operated on as a principle.

However, if you need to access the this context of a "wrapping object" within a lexical scope, using this directly will not work. In your specific case:

d3.select(this) will target the current DOM element being iterated, based on the type of the underlying DOM element in the item selection. For instance, if item is an SVGCircleElement, that will be the this context for your dragended function.
To access the wrapping object's this context, you can create a closure around the dragended function:

You can define a private method in the wrapping object with the save functionality:

private getDragEndedHandler() {
  let self = this; // preserve object context
  return function(d: TCMemberScenario, i: number) {
    d3.select(this).classed("active", false); // D3 bound DOM element context
    d.calculateRoles();
    self.save(); // object context preserved in closure
  }
}

When binding the event handler, you would then:

item.call(d3.drag()
    .on("start", this.dragstarted)
    .on("drag", this.dragged)
    .on("end", this.getDragEndedHandler())
);

This approach can also be implemented for other event handlers if necessary.

If you are using the latest types for d3-selection and d3-drag from npm, you will notice that they now offer generics for specifying the this context type related to DOM elements and D3 callbacks.

D3 version 4 with Typescript - How "this" is used in the context of d3.drag().on("end", this.dragended)

Answer №1

Answer №2

Answer №3

Similar questions

Does Vetur have additional undefined types in the type inference of deconstructed props?

Typescript error: Undefined reference to 'DhImportKeyParams'

Using AngularJS to inject a service into a static property of a standard class

Obtaining the TemplateRef from any HTML Element in Angular 2

The return type in Typescript for dynamically generated return values

Error: The variable _ is undefined when trying to use the .map() function on an array

How to import a page from a different component in the Next.js application router

Creating rectangular shapes on the canvas with the help of react hooks

Tips for accessing an item from a separate TypeScript document (knockout.js)

Creating a standard change listener for text entry fields utilizing Typescript and React with a dictionary data type

"Encountering a blank page in React Router when transitioning between separate projects

Rearrange Material UI styles in a separate file within a React project

Incorporating HTTP status codes into error handling

Using the prop callback in a React test renderer does not trigger updates in hooks

A guide on setting a constant object for template usage

What is the process for incorporating a new index signature into a class declaration from a file.d.ts in typescript?

Creating custom TypeScript validation types at compile time

What could be causing the HTTP response Array length in Angular to be undefined?

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

Issue with Angular $compile directive failing to update DOM element