鶏頭図を描く (SVG使用)

説明

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

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

HTMLソース

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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コード

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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領域の中心にする