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序列旭日動畫

回答

相關問題