d3 - sunburst - 给定更新数据的过渡 - 尝试动画，而不是捕捉答案

【问题标题】：d3 - sunburst - transition given updated data -- trying to animate, not snapd3 - sunburst - 给定更新数据的过渡 - 尝试动画，而不是捕捉
【发布时间】：2014-04-14 07:26:57
【问题描述】：

我正在制作基于 Mike Bostock 的 Zoomable Sunburst 示例的旭日形可视化。

我希望能够使用全新的 JSON（具有相同的结构但不同的“大小”值）更改基础数据，并让旭日形动画过渡以反映更新的数据。

如果我使用 .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));
}

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

http://jsfiddle.net/jTV2y/

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

【问题讨论】：

标签： javascript d3.js sunburst-diagram

【解决方案1】：

您的示例与sunburst partition example 非常相似，后者也通过转换更新数据。不同之处在于，在此示例中，它是具有不同值访问器的相同基础数据。这意味着您不能将先前的值保存在数据中（因为这会有所不同），但需要将其放在其他地方（例如 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) 来禁用它，请参阅here。

【讨论】：