鶏頭図をアニメーションさせながら描く (SVG使用)

説明

D3.jsでSVGを使って鶏頭図をアニメーションさせながら描くには、transition()を使います。アニメーション開始前の鶏頭図の半径を指定したarcオブジェクトと、最終的に表示する鶏頭図の半径を指定したarcオブジェクトの2つを用意します。最初にアニメーション開始前の鶏頭図の半径を指定したarcオブジェクトで描画しておき、transition()メソッド実行後に最終的に表示する鶏頭図の半径のデータ(arc)を指定します。これで、最初に鶏頭図が表示される際にアニメーションしながら登場するようになります。
なお、これ以外の鶏頭図の説明に関してはこちらのページを参照してください。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

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 = [ 
	{ value : 50 },
	{ value : 5 },
	{ value : 35 },
	{ value : 20 }
];
// 鶏頭図の1つのピースの割り当て角度を計算する
for(var i=0; i<list.length; i++){
	list[i].startAngle = (360/list.length)*i * Math.PI / 180;
	list[i].endAngle = (360/list.length)*(i+1) * Math.PI / 180;
}
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
// Colorは標準で用意されているのを使用
var color = d3.scale.category10();
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// 鶏頭図の円のサイズを指定
var arc = d3.svg.arc().innerRadius(50)
	.outerRadius(function(d){ return 60 + d.value; })	// 半径をデータによって変える
// アニメーション開始時の鶏頭図の円のサイズを指定
var arc0 = d3.svg.arc().innerRadius(50)
	.outerRadius(function(d){ return 50; })	// 半径を内径と同じにしておく
// 鶏頭図を描画
svg.selectAll("path")
	.data(list)
	.enter()
	.append("path")	// 円弧はパスで指定する
	.attr("d", arc0)	// 円弧を設定
	.attr("fill", function(d, i){
		return color(i);	// 塗りを設定
	})
	.attr("stroke", "white")	// 円グラフの区切り線を白色にする
	.attr("transform", "translate("+svgWidth/2+", "+svgHeight/2+")")	// 円グラフをSVG領域の中心にする
	.transition()	// アニメーション指定
	.duration(2000)	// 2秒かけてアニメーションさせる
	.attr("d", arc)	// 本来のサイズにする