Question

我正在根据迈克博斯托克的Zoomable Sunburst例子进行一场森伯斯特战争。

我希望能够使用全新的JSON（具有相同的结构但不同的'size'值）更改基础数据，并让sunburst为转换设置动画以反映更新的数据。

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

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

（..这几乎与点击fn的代码完全相同）

function click(d) {
   path.transition()
       .duration(750)
       .attrTween("d", arcTween(d));
}

..我发现sunburst确实正确地改变以反映新数据，但它会卡入到位而不是平滑过渡，就像放大时一样。

http://jsfiddle.net/jTV2y/＆lt; - 这是一个孤立的问题的jsfiddle（点击'Run'后转换发生一秒）

我猜我需要创建一个不同的arcTween（）fn，但我的d3理解还没有。非常感谢！

Answer 1

您的示例与sunburst partition example非常相似，here也会通过转换更新数据。不同之处在于，在此示例中，它是具有不同值访问器的相同底层数据。这意味着您无法在数据中保存先前的值（因为它会有所不同），但需要将其放在其他位置（例如DOM元素）。

更新的补间函数如下所示：

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;
  });

完整示例here。这个有一种奇怪的过渡，这是由布局中数据的不同顺序引起的。您可以致电.sort(null)停用该功能，请参阅{{3}}。

d3 - sunburst - 给出更新数据的过渡 - 尝试动画，而不是快照

1 个答案: