円グラフを描画する際にアニメーションの動きを指定する (SVG使用)

説明

D3.jsで円グラフを描画する際にアニメーションの動きを指定するにはease()メソッドを使います。パラメーターには動きを示す文字列などを指定します。文字列は"linear"、"quad"、"circle"、"bounce"などを指定することができます。詳しくはこちらのページを参照してください。
これ以外のデフォルトの色で色分けした円グラフをアニメーションさせながら表示する方法についてはこちらのページを参照してください。

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

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;
	})
	.ease("bounce")
	.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));	// 時間に応じて処理
		}
	})