D3序列Sunburst动画 [英] D3 Sequences Sunburst Animation

问题描述

我是D3的新手，我尝试使用缩放功能升级，
bl.ocks.org/mbostock/ 4348373 ），

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

这是我的CodePen ：

如何动画

解决方案

解决方案：

arc插入的圆弧和存储

  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）; 
}; 
}; 
 
函数stash（d）{
 d.x0 = 0; // d.x; 
 d.dx0 = 0; //d.dx; 
}; 
  

和transition（）属性到路径初始化：

  path.each（stash）
 .transition（）
 .duration（750）
 .attrTween（d，arcTween）; 
  

感谢所有。

I'm new to D3 and am trying to upgrade Kerryrodden's sequences sunburst with zooming and animation:

I've added the zooming opportunity with the onclick event and fully redraw the paths:

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

But now I have some troubles with animation. I found many versions of attrTween:

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

but none of them work in my case.

Here's the my CodePen:

How can I animate the drilldown of this sunburst?

解决方案

Solution founded:

Added functions arcTween and stash for axis interpolation

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

and transition() property to the paths initialization:

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

Thanks All.

这篇关于D3序列Sunburst动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！