鶏頭図を描く (SVG使用)

説明

D3.jsでSVGを使って鶏頭図を描くにはd3.svg.arc()メソッドを使います。鶏頭図の場合、外側の半径をデータごとに変化させる必要があります。内径はinnerRadius()メソッドで指定し、外径はouterRadius()メソッドで指定します。その祭、outerRadius()メソッドのパラメーターに関数を指定することでデータを受け取って、そのデータに応じて半径を設定することができます。
なお、鶏頭図で使用するデータは円グラフとして処理しているため、開始角度であるstartAngle、終了角度であるendAngleを設定する必要があります。サンプルではデータにstartAngle、endAngleプロパティを追加し、計算によって表示すべき角度を設定しています。
あとはattr("d", arc)として円弧を表示すれば鶏頭図が表示されます。なお、基本的には円グラフと同じなので、これ以外の説明に関してはこちらのページを参照してください。

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

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 = [ 
	{ value : 50 },
	{ value : 5 },
	{ value : 35 },
	{ value : 20 }
];
// 鶏頭図の1つのピースの割り当て角度を計算する
for(var i=0; i<list.length; i++){
	list[i].startAngle = (360/list.length)*i * Math.PI / 180;
	list[i].endAngle = (360/list.length)*(i+1) * Math.PI / 180;
}
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
// Colorは標準で用意されているのを使用
var color = d3.scale.category10();
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
// 鶏頭図の円のサイズを指定
var arc = d3.svg.arc().innerRadius(50)
	.outerRadius(function(d){ return 60 + d.value; })	// 半径をデータによって変える
// 鶏頭図を描画
svg.selectAll("path")
	.data(list)
	.enter()
	.append("path")	// 円弧はパスで指定する
	.attr("d", arc)	// 円弧を設定
	.attr("fill", function(d, i){
		return color(i);	// 塗りを設定
	})
	.attr("stroke", "white")	// 円グラフの区切り線を白色にする
	.attr("transform", "translate("+svgWidth/2+", "+svgHeight/2+")")	// 円グラフをSVG領域の中心にする