説明
D3.jsでSVGを使って円グラフを描くにはd3.layout.pie()メソッドとdata()メソッドを使います。pie()メソッドのパラメーターに関数を指定し、この関数内で円グラフのデータをreturnで返すようにします。このようにすると、データを順番に処理することができます。
次にd3.svg.arc()を使って表示する円グラフの内径と外径を指定します。内径はinnerRadius()メソッドで指定します。外径はouterRadius()メソッドで指定します。
あとは、円を描くためのパスをsvg要素に追加していきます。円グラフの場合、そのまま描画してしまうと区切り線が見えなくなってしまうのでstroke属性に色を設定しておきます。また、円グラフの場合、中心から表示されるようにtransform属性を使って表示位置を調整します。
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 = [50, 25, 12, 8, 5];
var svgWidth = 320; // SVG領域の横幅
var svgHeight = 240; // SVG領域の縦幅
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
// 円グラフを生成
var pie = d3.layout.pie()
.value(function(d){ return d; })
// 円グラフのサイズを指定
var arc = d3.svg.arc().innerRadius(0).outerRadius(100);
// 円グラフを描画
svg.selectAll("path")
.data(pie(list))
.enter()
.append("path") // 円弧はパスで指定する
.attr("d", arc) // 円弧を設定
.attr("stroke", "white") // 円グラフの区切り線を白色にする
.attr("transform", "translate("+svgWidth/2+", "+svgHeight/2+")") // 円グラフをSVG領域の中心にする