Getting d3.drag to work in Angular

Community Help
1

I cannot get drag and drop to work in Angular. For some reason, the functions are not getting called.

 this.node = this.svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(this.graph.nodes)
      .enter().append("circle")
      .call(d3.drag())
      .on("start", this._dragStart)
      .on("drag", this._dragOngoing)
      .on("end", this._dragEnd);

Something to do with this ?

2

There are two ways to use the “this” keyword in TypeScript or an Angular project.

First : If you use a function name without the “function” keyword, like in an arrow function in JavaScript, “this” represents the global scope, not the local scope.

Example :
export class ClassName {
private svg : any

		 constructor() {}
		 
             private abc() : void {
			 
			   this.svg.attr("fill", (d)=> {
			   // there ()=>{} (Arrow Function) represents the global 'this' keyword
			   return d;
			 })
		    }
		}

Second : If you use the “function” keyword in steed of arrow function, then “this” is treated as the local scope.

Example :
export class ClassName {
private svg : any

		 constructor() {}
		 
             private abc() : void {
			 
			   this.svg.attr("fill", function() {
			   // represents the local scope 'this'
			   return d;
			 })
		    }
		}

Kindly console.log(this), and according to me, you will get your answer by itself.