D3 sunburst 更新数据：多个过渡仍然快速，不平滑答案

【问题标题】：D3 sunburst with updated data: multiple transitions still snap, not smoothD3 sunburst 更新数据：多个过渡仍然快速，不平滑
【发布时间】：2015-10-01 04:46:05
【问题描述】：

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

我已经尝试过the final fiddle that Lars provided，但是当有多个过渡时，动画仍然失败并且我们会捕捉到。问题可见this updated fiddle that contains a second transition。

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

非常感谢任何有关解决此问题并使上述小提琴适用于多个转换（例如，在两个 JSON 之间来回）的帮助。谢谢！

【问题讨论】：

标签： javascript d3.js sunburst-diagram

【解决方案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。

【讨论】：