出現した順番に従って円の色を指定する (SVG使用)

説明

D3.jsで出現した順番に従って円の色を指定するにはattr()メソッドを使います。attr()メソッドの2番目のパラメーターに関数を指定することで、円の出現順番に応じて色を指定することができます。表示する色はあらかじめ配列に入れておきます。関数にはデータと出現位置が渡されます。出現位置を配列の添字に指定することで出現順番に応じた色にすることができます。
円の描き方などはこちらのページを参照してください。

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

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 color = ["red", "blue", "green", "orange", "purple"];
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", function(d,i){	// 円の色を設定する
		return color[i];
	});