# Getting d3.drag to work in Angular

**URL:** <https://talk.observablehq.com/t/getting-d3-drag-to-work-in-angular/8487>\
**Category:** Help\
**Created:** [November 11, 2023, 8:18pm UTC](https://talk.observablehq.com/t/getting-d3-drag-to-work-in-angular/8487 "2023-11-11T20:18:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [November 11, 2023, 8:18pm UTC](https://talk.observablehq.com/t/getting-d3-drag-to-work-in-angular/8487/1 "2023-11-11T20:18:40Z")

</div>

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

```auto
 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` ?

---

<div class="post-metadata">

**Author:** ![imakashram](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/imakashram/32/8918_2.png) [@imakashram](https://talk.observablehq.com/u/imakashram)\
**Post date:** [November 14, 2023, 7:29am UTC](https://talk.observablehq.com/t/getting-d3-drag-to-work-in-angular/8487/2 "2023-11-14T07:29:46Z")

</div>

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.