D3.js D3数据与sunburst序列的转换 介绍

我正在使用d3.js的Sunburst序列来可视化数据

我想在两个数据集之间添加一个转换（由按钮触发）。我想每个弧动画显示新的数据。 类似这样的内容：，但不更改访问器

---

研究 在（1）Sunburst_示例中，修改了值访问器。但我想更改数据，而不是定义如何访问数据的函数

所以，我寻找了一种将数据重新定义为路径的方法

我的灵感来自（2）Sunburst_示例，使用each（）方法存储旧值，并使用attrween（）进行转换。但没有任何变化，我收到以下错误消息： 超过了最大调用堆栈大小。可能是因为我有一个方法，而我不在全局范围内。 （2） 链接：_http://ninjapixel.io/StackOverflow/doughnutTransition.html

然后我尝试了（3）可缩放的Sunburst示例，但在我的案例中没有发生任何事情
（3） 链接：_http://bl.ocks.org/mbostock/4348373

---

我的例子 以下是我的例子：

问题是：

• 颜色丢失了
• 过渡没有发生

我想我不明白转换是如何真正起作用的，在这种情况下，我可能会错过一些可以帮助我的东西。 有什么帮助吗

-

重新定义节点和路径的按钮调用click方法的侦听器

/*CHANGING DATA*/
function click(d){
  d3.select("#container").selectAll("path").remove();

  var nodes = partition.nodes(d)
      .filter(function(d) {
      return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
      }) ;

  var path = vis.data([d]).selectAll("path")
      .data(nodes)
      .enter().append("svg:path")
      .attr("display", function(d) { return d.depth ? null : "none"; })
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d) { return colors[d.name]; })
      .style("opacity", 1)
      .on("mouseover", mouseover)
      .each(stash)
      .transition()
      .duration(750)
      .attrTween("d", arcTween);
  ;

  // Get total size of the tree = value of root node from partition.
  totalSize = path.node().__data__.value;
}

_

---

数据特征：

• 两个数据集的根节点相同
• 结构是全局相同的，只有值在更改
• 有些字段会消失，但我们可以使用等于0的值添加它们

---

 // Stash the old values for transition.
function stash(d) {
   d.x0 = d.x;
   d.dx0 = d.dx;
}
  // Interpolate the arcs in data space.
 function arcTween(a) {
   var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
   return function(t) {
     var b = i(t);
     a.x0 = b.x;
     a.dx0 = b.dx;
     return arc(b);
   };
 }