D3 sunburst with updated data：多个转换仍然快速，不平滑

Question

这个问题建立在 Lars Kotthoff 对使用基于不同 JSON 数据的 D3 旭日图转换问题的非常有用的回答之上：d3 - sunburst - transition given updated data -- trying to animate, not snap

我试过了the final fiddle that Lars provided but when there is more than one transition, the animation still fails and we get snapping. The problem can be seen in this updated fiddle that contains a second transition。

据我所知，调用 arcTweenUpdate 函数时，x0 和 dx0 值未正确存储在路径对象中。当我检查 this 对象在 arcTweenUpdate 函数内部的样子时，当读取 this.x0 和 this.dx0 时，我在函数开头得到一个 [object SVGPathElement]，并且稍后写入新值时，我得到一个 [object Window]。我对 JS 相对缺乏经验，但这似乎可以指出问题所在。

非常感谢任何解决此问题并使上述 fiddle 适用于多个转换（例如，在两个 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);
  };
}

完成演示 here。

D3 sunburst with updated data：多个转换仍然快速，不平滑

D3 sunburst with updated data: multiple transitions still snap, not smooth

javascript

d3.js

sunburst-diagram