バブルチャートの円を指定したサイズにアニメーションさせながら文字をフェードインさせる (SVG使用)

説明

D3.jsのバブルチャートの円を指定したサイズにアニメーションさせながら文字をフェードインさせるには、transition()メソッドを使います。最初の状態では円の半径を0に、文字の不透明度を0にしておきます。このようにすると円のサイズが0で表示されず、文字も完全な透明になるため表示されません。次にon()メソッドでイベントを検知したらアニメーションを行います。これはtransition()メソッドの記述した後に実際に表示する円のサイズと文字の不透明度を指定します。必要に応じてduration()メソッドでアニメーション時間を指定します。サンプルではページ内クリックで円と文字がアニメーション表示されます。
これ以外のバブルチャート（パックレイアウト）の説明に関してはこちらのページを参照してください。

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

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<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 = {	// 長野県塩尻市の世帯数(2010年)
	"name": "長野県",
	"children": [
		{
			"name": "塩尻市",
			"children": [
				{ "name": "大　門", "households": 4042 },
				{ "name": "塩尻東", "households": 2599 },
				{ "name": "片　丘", "households": 1257 },
				{ "name": "高　出", "households": 3081 },
				{ "name": "広　丘", "households": 5452 },
				{ "name": "吉　田", "households": 4081 },
				{ "name": "洗　馬", "households": 1590 },
				{ "name": "宗　賀", "households": 2022 },
				{ "name": "北小野", "households": 706 },
				{ "name": "楢　川", "households": 1016 }
			]
		}
	]
};
var svgWidth = 480;	// SVG領域の横幅
var svgHeight = 480;	// SVG領域の縦幅
var diameter = 420;	// 一番大きい円のサイズ
var color = ["none", "#ffa0a0", "#a0a0ff", "orange", "#ffe090", "#a0ff90", "cyan", "#ccc", "#ff8080", "#c0ffc0", "#4090ff"];
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
var bubble = d3.layout.pack()
	.size([diameter, diameter])	// 表示サイズを指定
var grp = svg.selectAll("g")	// グループを対象にする
	.data(bubble.nodes(classes(list)))	// データを読み込む
	.enter()
	.append("g")
	.attr("transform", function(d) { 	// 円のX,Y座標を設定
		return "translate(" + d.x + "," + d.y + ")";
	})
var circle = grp.append("circle")	// 円を生成する
	.attr("r", 0)	// 円を指定した半径にする
	.attr("fill", function(d,i){	// 塗りの色を指定
		return color[i];
	})
var text = grp.append("text")	// 文字を生成する
	.attr("font-size", "9pt")	// 文字のサイズを指定する
	.attr("fill", "black")	// 文字の塗りの色を指定する
	.attr("opacity", 0)	// 不透明度を指定
	.style("text-anchor", "middle")	// 円の座標の中央から表示するようにする
	.text(function(d) { return d.className; } )	// データの中のclassNameが地区名なので、それを出力
// 階層化されたJSONデータをフラット化する (D3.js本家のを少し変更して利用)
function classes(root) {
	var classes = [];
	function recurse(name, node) {
		if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
		else classes.push({packageName: name, className: node.name, value: node.households});
	}
	recurse(null, root);
	return {children: classes};
}
d3.select("body").on("click", function(){
	circle
		.transition()	// トランジション指定
		.duration(2000)	// 2秒かけてアニメーション
		.attr("r", function(d){	// 円を指定した半径にする
			return d.r;
		})
	text
		.transition()	// トランジション指定
		.duration(2000)	// 2秒かけてアニメーション
		.attr("opacity", 1.0)	// 文字の不透明を指定する
});