更新圖表時，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完整。

希望其中之一可以解決范圍問題。