Javascript d3-太阳风暴-给定更新数据的过渡-尝试设置动画，而不是捕捉

我正在根据Mike Bostock的例子开发sunburst viz

我希望能够使用全新的JSON（具有相同的结构但不同的“大小”值）更改底层数据，并让sunburst动画化转换以反映更新的数据

如果我使用.data（）更改路径元素的数据，然后尝试按以下方式更新：

path.data(partition.nodes(transformed_json))
    .transition()
    .duration(750)
    .attrTween("d", arcTween(transformed_json));

（…与click fn的代码几乎完全相同）

…我发现太阳暴流确实会正确地改变以反映新数据，但它会捕捉到位，而不是像放大时那样平滑过渡

---

您的示例与非常类似，它还使用转换更新数据。区别在于，在本例中，相同的基础数据具有不同的值访问器。这意味着您不能在数据中保存上一个值（因为这会有所不同），但需要将其放在其他地方（例如DOM元素）

更新后的tween函数如下所示：

function arcTweenUpdate(a) {
  var i = d3.interpolate({x: this.x0, dx: this.dx0}, a);
  return function(t) {
    var b = i(t);
    this.x0 = b.x;
    this.dx0 = b.dx;
    return arc(b);
  };
}

与原始示例一样，这需要保存原始的

x

和

dx

值：

.enter().append("path")
.each(function(d) {
      this.x0 = d.x;
      this.dx0 = d.dx;
  });

完整的例子。这一个有一种奇怪的过渡，这是由布局中数据的不同顺序引起的。您可以通过调用

.sort（null）

禁用该功能，请参阅

.enter().append("path")
.each(function(d) {
      this.x0 = d.x;
      this.dx0 = d.dx;
  });