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

Question

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

我希望能够使用全新的 JSON(具有相同的结构但“大小”值不同)更改基础数据，并让旭日动画转换以反射(reflect)更新后的数据。

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

..我发现旭日确实会正确更改以反射(reflect)新数据，但它会卡入到位而不是平滑过渡，就像放大时那样。

http://jsfiddle.net/jTV2y/ <-- 这里是一个 jsfiddle，问题被隔离了(转换发生在你点击“运行”后的一秒钟)

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

Answer 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 .