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

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/ < - 这是一个隔离问题的jsfiddle(点击'Run'后转换发生一秒钟)

我猜我需要创建一个不同的arcTween()fn,但我的d3理解还没有.非常感谢!

Answer 1

您的示例与sunburst分区示例非常相似,该示例也通过转换更新数据.不同之处在于,在此示例中,它是具有不同值访问器的相同底层数据.这意味着您无法将先前的值保存在数据中(因为它会有所不同),但需要将其放在其他位置(例如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;
  });

在这里完成示例.这个有一种奇怪的过渡,这是由布局中数据的不同顺序引起的.您可以通过致电禁用它.sort(null),请参阅此处.