説明
D3.jsでデフォルトの色で色分けした円グラフを一周させるアニメーションさせながら描くにはattrTween()メソッドとdelay()メソッドを使います。最初のパラメーターには"d"を指定します。2番目のパラメーターには関数を指定します。この関数内で円グラフの各ピース部分に応じて角度を設定します。開始角度などの設定はd3.interpolate()メソッドを使って行います。最初のパラメーターに開始角度と終了角度をオブジェクトリテラル型式で指定します。つまり{ startAngle : 0, endAngle : 0 }のように指定します。これは開始角度、終了角度とも最初は0度から始まることを示しています。2番目のパラメーターではアニメーションの最後の開始角度と終了角度を指定します。開始角度は関数に渡されたオブジェクトのstartAngleに入っているのでd.startAngleと指定します。終了角度はd.endAngleになります。
次に時間に応じて計算結果を返すようにfunction(t){ return arc(interpolate(t)); }とすれば自動的にアニメーションが行われます。色分けした円を順番に描くためにdelay()メソッドを使います。delay()メソッドのパラメーターに関数を指定します。関数にはデータの順番を示すパラメーターが渡されます。この順番を示す値と秒数を乗算します。つまり「データの順番×秒数」をreturnで返せば円グラフが0度から360度まで一周しながらアニメーションするようになります。
これ以外のデフォルトの色で色分けした円グラフの表示方法については
こちらのページを参照してください。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
svg { border: 1px solid black; }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
var list = [50, 25, 12, 8, 5];
var temp = [];
var color = d3.scale.category10(); // 10色を指定
var svgWidth = 320; // SVG領域の横幅
var svgHeight = 240; // SVG領域の縦幅
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
// 円グラフを生成
var pie = d3.layout.pie()
.value(function(d){ return d; })
// 円グラフのサイズを指定
var arc = d3.svg.arc().innerRadius(0).outerRadius(100);
// グループを作成
var g = svg.append("g");
// 円グラフを描画
g.selectAll("path")
.data(pie(list))
.enter()
.append("path") // 円弧はパスで指定する
.attr("stroke", "white") // 円グラフの区切り線を白色にする
.attr("fill", function(d, i){
return color(i);
})
.attr("transform", "translate("+svgWidth/2+", "+svgHeight/2+")") // 円グラフをSVG領域の中心にする
.transition() // トランジション開始
.duration(1000) // 1秒間でアニメーションさせる
.delay(function(d,i){ // 描画する円グラフをずらして表示
return i*1000;
})
.attrTween("d", function(d){ // 指定した範囲で値を変化させアニメーションさせる
var interpolate = d3.interpolate(
{ startAngle : d.startAngle, endAngle : d.startAngle }, // 各円グラフの開始角度
{ startAngle : d.startAngle, endAngle : d.endAngle } // 各円グラフの終了角度
);
return function(t){
return arc(interpolate(t)); // 時間に応じて処理
}
})