D3 序列森伯斯特动画答案

【问题标题】：D3 Sequences Sunburst AnimationD3 序列森伯斯特动画
【发布时间】：2014-03-29 15:39:26
【问题描述】：

我是 D3 新手，正在尝试使用缩放和动画升级 Kerryrodden's sequences sunburst：

我通过onclick 事件添加了缩放机会并完全重绘了路径：

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)
      .on("click", click);

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

但现在我在动画方面遇到了一些麻烦。我发现了许多版本的 attrTween：

bl.ocks.org/mbostock/1306365, bl.ocks.org/mbostock/4348373),

但它们都不适用于我的情况。

Here's the my CodePen:

如何为这个旭日形的钻取设置动画？

【问题讨论】：

你见过this example吗？我认为它提供了你想要的所有动画。
是的，它给了我一个错误：错误：解析问题 d="function (t) { x.domain(xd(t)); y.domain(yd(t)).range( yr(t)); return arc(d); }"
不确定你的意思，这个例子对我来说很好。

标签： javascript animation d3.js sunburst-diagram

【解决方案1】：

解决方案成立：

为轴插补添加了 arcTween 和 stash 函数

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);
                    };
                };

function stash(d) {
                    d.x0 = 0; // d.x;
                    d.dx0 = 0; //d.dx;
                };

和transition()属性到路径初始化：

path.each(stash)
     .transition()
     .duration(750)
     .attrTween("d", arcTween);

谢谢大家。

【讨论】：