D3太阳爆发与更新的数据:多个过渡仍然snap，不顺利

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

本文关键字：snap 不顺利 爆发 太阳 更新 数据 D3      更新时间：2023-09-26

这个问题建立在Lars Kotthoff对基于不同JSON数据的D3 sunburst图的过渡问题的非常有用的回答之上:D3 - sunburst -给定更新数据的过渡-尝试动画，而不是snap

我已经尝试了Lars提供的最后一个小提琴，但是当有多个过渡时，动画仍然失败，我们开始捕捉。这个问题可以在这个包含第二个转换的更新后的小提琴中看到。

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

任何帮助解决这个问题，并使上述小提琴工作的多个转换(例如在两个json之间来回)是高度赞赏的。谢谢!

你已经发现了我之前的答案中的一个错误:)

问题是，正如你所说的，保存的值没有正确更新。这是因为回调中的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);
  };
}
相关文章：