散布図のシンボルをアニメーションさせながら一斉に描く (SVG使用)

説明

D3.jsで散布図のシンボルをアニメーションさせながら一斉に描くにはtransition()メソッドを利用します。まず、通常の散布図のプログラムを作成します。その時に図形のサイズ（円なら半径を0）を0にしておきます。次にtransition()メソッドを記述し、その直後にattr()メソッドで表示する図形のサイズを指定します。また、図形を表示し終わるまでのアニメーション時間はduration()メソッドで指定します。指定する値はミリ秒なので1000とすると1秒間でアニメーション処理が行われます。
なお、これ以外の散布図の表示方法についての説明はこちらのページを参照してください。

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

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 = [[120,210], [230, 40], [200, 130], [15, 225], [182, 75], [50, 20], [160, 140], [160, 90], [310, 10]];
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// 散布図を描画
svg.selectAll("path")
	.data(list)
	.enter()
	.append("circle")	// 円を生成する
	.attr("cx", function(d,i){
		return d[0];	// 描画するX座標を計算
	})
	.attr("cy", function(d){
		return svgHeight-d[1];	// 描画するX座標を計算
	})
	.attr("r", 0)	// 最初は0にすることで何も表示しなくなる
	.attr("stroke", "black")	// 円の区切り線を黒色にする
	.attr("stroke-width", "1px")	// 円の線幅を指定する
	.attr("fill", "red")	// 円の塗りつぶしを黄色にする
	.transition()
	.duration(500)	// アニメーションにかかる時間を500msecにする
	.attr("r", 8)	// 最終的に表示する円の大きさを指定する