Call class method within D3 method

Question

I have a JS class where I'm using D3. I've created a button element that I need to execute a class function upon being pressed. What is the proper way to do this?

class MyClass{
...
   foo(bar){
      d3.select("button").on("click",function(){ this.print(bar) });
   }

   print(text){
      console.log(text);
   }
}

As far as I know, going within the scope of function(){..} loses the binding of this and the instance of MyClass, because it claims that this.print() is not a function.

score 0 · Answer 1 · answered Mar 15 '22 at 08:21

0

To do it you can save your class instance inside a variable

in my sample

let _this = this;

And use this new variable in your d3 function

class MyClass{
...
   foo(bar){
      let _this = this;
      d3.select("button").on("click",function(){ _this.print(bar) });
   }

   print(text){
      console.log(text);
   }
}

answered Mar 15 '22 at 08:21

jeremy-denis

6,368
3
18
35

That works for that simple example great! However, what happens if I need to update some class variable inside `print()`? – bleuj Mar 15 '22 at 08:46
it will run `this` inside print function don't change and continue match to the class instance – jeremy-denis Mar 15 '22 at 08:49

score 0 · Answer 2 · answered Mar 15 '22 at 09:01

You can use an arrow function to keep the reference to the instance's this context. In the words of the docs:

In arrow functions, this retains the value of the enclosing lexical context's this.

Your code could thus be rewritten as

d3.select("button").on("click", () => this.print(bar));

Call class method within D3 method

2 Answers2