D3日光下具有更新的數據：多個過渡仍然會捕捉，不平滑

Question

這個問題基於Lars Kotthoff對基於不同JSON數據的D3朝陽圖過渡的非常有幫助的答案： d3-朝陽-給定更新數據的過渡-嘗試制作動畫，而不是捕捉

我已經嘗試了Lars提供的最后的提琴，但是當存在多個過渡時，動畫仍然會失敗，並且我們會捕捉到。 在包含第二個過渡的更新的小提琴中可以看到問題所在。

據我所知，調用arcTweenUpdate函數時， x0和dx0值未與路徑對象正確存儲。 當我在arcTweenUpdate函數中檢查this對象的外觀時，當讀取this.x0和this.dx0時，在函數的開頭得到一個[object SVGPathElement]，當新值是以后寫。 我對JS經驗不足，但這似乎可以指出問題所在。

非常感謝您提供任何幫助解決此問題的方法，並且可以使上面的提琴工作多次轉換（例如，在兩個JSON之間來回轉換）。 謝謝！

Answer 1

好吧，您在我之前的答案中發現了一個錯誤：)

正如您所說，問題是保存的值沒有正確更新。 這是因為this回調中不參照path DOM元素了。 修復很簡單-在以上級別的函數中保存this的引用，並使用該引用：

function arcTweenUpdate(a) {
  var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
  var that = this;
  return function(t) {
    var b = i(t);
    that.x0 = b.x;
    that.dx0 = b.dx;
    return arc(b);
  };
}

在此處完成演示。