6

我正在研究基于 Mike Bostock 的Zoomable Sunburst示例的 sunburst viz。

我希望能够使用全新的 JSON（具有相同的结构但不同的“大小”值）更改基础数据，并让 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));
}

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

http://jsfiddle.net/jTV2y/ <-- 这是一个问题被隔离的 jsfiddle（转换发生在您单击“运行”后一秒钟）

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

4

1 回答 1

8

您的示例与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)，请参见此处。

于 2014-03-11T18:30:59.697 回答