Question

这个问题建立在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中找到。

据我所知，select A.Person, count (A.Person) from table A join table B on A.Person = B.Person where A.Datetime = date_add(B.Datetime, interval 1 day) group by A.Person和x0值在调用dx0函数时未与路径对象正确存储。当我在arcTweenUpdate函数中检查this对象的样子时，在读取arcTweenUpdate和this.x0时，我在函数的开头得到一个[对象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);
  };
}

完整演示here。

具有更新数据的D3 sunburst：多个过渡仍然快照，而不是平滑

1 个答案: