D3序列旭日动画

我是新来的D3，我试图用缩放和动画升级Kerryrodden's sequences sunburst：D3序列旭日动画

enter image description here

我已经添加了变焦机会与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：

enter image description here

我怎样才能动画这个旭日的明细？

来源

2014-03-29 user3476013

你见过[this example]（http://bl.ocks.org/mbostock/4348373）吗？我认为它提供了你想要的所有动画。 –

是的，它给了我一个错误：错误：解析d =“函数（t）{x.domain（xd（t））; y.domain（yd（t））。range（yr（t））; return arc（d）;}“ – user3476013

不确定你的意思，这个例子对我来说工作得很好。 –

解成立：

附加功能arcTween和存储一个轴插补

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

和过渡（）属性的路径初始化：

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

由于全部。

来源

2014-03-30 00:53:05 user3476013

D3序列旭日动画

回答

相关问题