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

Question

这是我的更新方法，它将新数据作为输入

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

这是我的arcTween方法：

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

调用上述指定方法时出现问题：core.es5.js：1084错误TypeError：无法设置未定义的属性'arc'

仔细检查表明，“ this”也未定义。

我该如何解决这个问题？ 似乎d3.js不适合角度4：S

我尝试了很多解决方法，但是一切都会导致此错误

Answer 1

我认为您遇到了范围问题，您可能可以这样解决：

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将超出范围-会丢失上下文。 一个解决方法是s.alem如何更改代码以添加一个let that = this; 然后用that里面的功能- that将继续持有的价值this 。 尝试修复它的另一种方法是将其变成箭头函数：

（伪代码，我没有尝试过，但是您会明白的）

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
  };
}

另一种方法是，如果这是写在对象上的方法，则可以通过该对象调用它。 因此，如果arcTween是animation对象上的方法，则可以使用

animation.arcTween() 

它会保持它的this完整。

希望其中之一可以解决范围问题。