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

在此处完成演示。