d3 - sunburst - 给定更新数据的过渡 - 试图动画，不捕捉 [英] d3 - sunburst - transition given updated data -- trying to animate, not snap

问题描述

我正在开发一个基于Mike Bostock的 Zoomable Sunburst 示例的sunburst viz。

I am working on a sunburst viz based off of Mike Bostock's Zoomable Sunburst example.

我想能够使用一个全新的JSON（具有相同的结构但不同的大小值）更改基础数据，并且让sunburst动画转换到反映更新的数据。

I want to be able to change the underlying data using a whole new JSON (which has the same structure but different 'size' values), and have the sunburst animate a transition to reflect the updated data.

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

If I change the data of the path elements using .data(), and then attempt to update in the following fashion:

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

（这几乎是和点击fn完全相同的代码）

(..which is pretty much the exact same code as the click fn)

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

..我发现sunburst正确地改变以反映新的数据，

..I find that the sunburst does correctly change to reflect the new data, but it snaps into place rather than smoothly transitioning, like it does when you zoom in.

http://jsfiddle.net/jTV2y/ - 这是一个jsfiddle与孤立的问题（转换发生一秒后，你点击运行）

http://jsfiddle.net/jTV2y/ <-- Here is a jsfiddle with the issue isolated (the transition happens one second after you click 'Run')

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

I'm guessing that I need to create a different arcTween() fn, but my d3 understanding is not there yet. Many thanks!

推荐答案

您的示例与 sunburst分区示例，它还使用转换更新数据。区别在于，在这个例子中，它是具有不同值访问器的相同的底层数据。这意味着你不能保存数据中的前一个值（因为这将是不同的），但需要放在别的地方（例如DOM元素）。

Your example is quite similar to the sunburst partition example, which also updates data with a transition. The difference is that in this example it's the same underlying data with different value accessors. This means that you can't save the previous value in the data (as that will be different), but need to put it somewhere else (e.g. the DOM element).

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

The updated tween function looks like this:

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 值：

This requires, as in the original example, to save the original x and dx values:

.enter().append("path")
.each(function(d) {
      this.x0 = d.x;
      this.dx0 = d.dx;
  });

完成示例此处。这个有一种奇怪的过渡，这是由布局中的数据的不同的顺序造成的。您可以通过调用 .sort（null）来禁用它，请参见这里。

Complete example here. This one has a kind of weird transition which is cause by the different order of the data in the layout. You can disable that by calling .sort(null), see here.

这篇关于d3 - sunburst - 给定更新数据的过渡 - 试图动画，不捕捉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！