データに応じたサイズの円を描く (SVG使用)

説明

D3.jsでデータに応じたサイズの円を描くにはappend("circle")を使って円を生成します。生成した円のX座標を指定するにはcx属性、Y座標を指定するにはcy属性に指定します。円の半径はr属性に指定します。その際、数値を指定するところに関数を指定するとデータに応じて円の位置やサイズを指定することができます。関数にはデータとデータの出現位置が渡されます。渡されたデータに応じて座標や円の半径を計算します。計算した結果をreturnで返すと反映されます。データが複数ある場合はデータの数だけ自動的に処理されますので、for()で繰り返し処理をする必要はありません。

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

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 = [20, 5, 12, 46, 32];
var svgWidth = 640;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
var xStep = 100;	// 円の間隔
var xOffset = 100;	// 横方向のオフセット
// 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 i * xStep + xOffset;	// 描画するX座標を計算
	})
	.attr("cy", svgHeight/2)
	.attr("r", function(d){
		return d;	// 描画する円の半径を計算（というか、そのまま）
	})
	.attr("stroke", "black")	// 円の区切り線を黒色にする
	.attr("fill", "yellow");	// 円の塗りつぶしを黄色にする