更新图表时，arcTween甜甜圈过渡在角度4中不起作用

Question

This is my update method, which is takes the new data as an input

public updateChart(mockData?: any) {
this.path.data(this.pie(this.dataset))
.transition()
.duration(750)
.attrTween('d', <any> this.arcTween);}`

and this is my arcTween method:

public arcTween(a: any): any {
let i = d3.interpolate(this.current, a);
this.current = i(0);
  return function (t) {
    return this.arc(i(t));
  };
}

Problem when calling the specified method above: core.es5.js:1084 ERROR TypeError: Cannot set property 'arc' of undefined

a closer inspection shows that also "this" is also undefined.

How can i fix this issue? It seems that d3.js is not suitable for angular 4 :S

i tried a lot of workarounds, but everything leads to this error

Answer 1

I think you are having a scope problem which you probably can solve like this:

public arcTween(a: any): any {
    let i = d3.interpolate(this.current, a);
    let that = this;
    this.current = i(0);
    return function (t) {
        return that.arc(i(t));
    };
}

Answer 2

this becomes out of scope if used inside an internal function like this - it loses context. One fix is how s.alem has changed the code to add a let that = this; and then use that inside the function - that will continue to hold the value of this . Another way to try to fix it is to turn it into an arrow function:

(pseudocode, I have not tried this, but you'll get the idea)

public arcTween(a: any): any {
let i = d3.interpolate(this.current, a);
this.current = i(0);
  return t() => {
    return this.arc(i(t));   //this will be as expected
  };
}

Another way is if this is a method written on an object, you can call it via that object. So if arcTween is a method on the animation object, you could call it with

animation.arcTween() 

and it will keep its this intact.

Hopefully one of those fixes the scope issue.