D3.JS之別人家的餅圖動畫
阿新 • • 發佈：2019-01-23
最近看到D3的demo庫中有一個例子，他是從無到有旋轉開來。他這個動畫效果的。
效果如下：
在來看看我之前寫的效果：
對比一下就很容易看出來兩個餅圖旋轉開來的區別了：
第一個是所有的弧都開始從無到有變化
第二個：是一個弧選旋轉完成在到到下一弧開始旋轉(具體實現看之前寫的教程)
本篇主要來說說第一個的實現。
其實也沒什麼好說的，就是設定所有的弧的startAngle和endAngle都為0 然後向著原始的角度過渡，中間用attrTween來設定。
而我寫的，只不過給每一個弧都新增delay時間：這個時間是之前所有弧展開需要的時間。
只不過想說的是作者的程式碼還是很簡潔的不像我寫的好長好麻煩。
基本的註釋都寫在裡面了。如果有錯誤的話請指正。
<!DOCTYPE html> <html> <head> <title>Pie Chart</title> <script type="text/javascript" src="../../../js/d3.js"></script> </head> <body> <script type="text/javascript"> var width=960, height=500, radius = Math.min(width, height) / 2 - 10; var data=d3.range(10).map(Math.random).sort(d3.descending);//降序 var color=d3.scale.category20(); var arc=d3.svg.arc().outerRadius(radius);//定義了一個弧生辰器，外半徑設定為radius var pie=d3.layout.pie(); //定義一個餅圖佈局 var svg=d3.select('body').append('svg') .attr('width',width) .attr('height',height) .append('g') .attr('transform',"translate("+width/2+","+height/2+")");//新增一個svg,設定寬高，在偏移到中心。 var arcs=svg.selectAll('g.arc') .data(pie(data)) //繫結資料 .enter().append('g') //新增g .attr('class',"arc"); //定義一個arc類 arcs.append('path') //新增路徑 .attr('fill',function(d,i){ //根據i的下標給每一個元素新增不同的顏色。 return color(i); }) .transition() //設定動畫 .ease('bounce') //動畫效果 .duration(2000) //持續時間 .attrTween('d',tweenPie) //兩個屬性之間平滑的過渡。 .transition() .ease("elastic") .delay(function(d,i){return 2000+i*50}) //設定了一個延遲時間，讓每一個內半徑不在同一個時間縮小。 .duration(750) .attrTween('d',tweenDonut); function tweenPie(b){ //這裡將每一個的弧的開始角度和結束角度都設定成了0 //然後向他們原始的角度(b)開始過渡，完成動畫。 b.innerRadius=0; var i=d3.interpolate({startAngle:0,endAngle:0},b); //下面的函式就是過渡函式，他是執行多次最終達到想要的狀態。 return function(t){return arc(i(t));}; } function tweenDonut(b){ //設定內半徑不為0 b.innerRadius=radius*.6; //然後內半徑由0開始過渡 var i=d3.interpolate({innerRadius:0},b); return function(t){return arc(i(t));}; } </script> </body> </html>