d3.jsの関数(d3.pie、d3.arc)より簡単のパイチャート(pie chart)作成
d3.jsでパイチャート(pie chart)作成するにd3.pie、d3.arcが必要
- svgでパイチャート(pie chart)を作成するにはpathエレメントで円弧の描画は一般的な方法です
- pathで円弧を描画するには始点(start angle)、終点(end angle)が必要
- 描画データ配列から始点、終点の計算は少し面倒です
- d3.jsで円弧の始点/終点計算はd3.pieで解決できます
- 円弧の描画にはd3.arcを使用します
- 各パイの色使いは:d3.jsの関数(scale)よりデータを色で表現する方法 をご参考
パイチャート作成1:d3.pieで描画データをパイチャートデータへの変換
- 簡単な描画データ配列
var data_set = [
{name:"aaa", val:58},
{name:"bbb", val:88},
{name:"ccc", val:48},
{name:"ddd", val:73},
{name:"eee", val:81},
{name:"fff", val:31}
] ;
- d3.pie関数に描画データ渡して、パイチャートのデータを簡単に変換できます
var pie_data = d3.pie()
.sort(null)
.value(function(d){return d.val;}) // 描画データのval要素をパイチャートの始点/終点に
(data_set) ; // 描画データを渡す
- 変換されたパイチャートデータ(pie_data)をコンソールに出力(console.log(pie_data))して確認すると、startAngle、endAngleが作成されました

パイチャート作成2:d3.arcを利用してパイチャートを描画
- d3.arcでパイチャートの外側の半径、内側の半径(>0の場合、ドーナツのように)を指定します
- svgのpathエレメントを作成して、パイチャートの各円弧を描画します
var arc = d3.arc()
.outerRadius( 200) // パイチャートの外側の半径
.innerRadius( 0 ) // パイチャートの内側の半径
;
var pie_chart = d3.select("#content") // 描画領域の取得
.selectAll(".arc")
.data(pie_data) // パイチャートデータ配列をセット
.enter() // 配列分のデータを新規作成したエレメントにバインドする
.append("g") // 新規エレメント作成
.attr("class", "arc")
.attr("transform", "translate(300, 200)") // 描画領域の中心に移動
;
pie_chart.append("path") // pathエレメントの作成
.attr("d", arc) // 円弧の描画
.style("fill", function(d,i){ return color_scale( d.data.val ) ; })

パイチャート作成3:d3.arcで各パイに表示するテキストの描画場所を指定
- 各パイの内側でテキストを表示するので、再度d3.arcを利用して半径を指定します
var label_arc = d3.arc()
.outerRadius( 150 ) // 外側の半径
.innerRadius( 150 ) // 内側の半径
;
- 外側の半径と内側の半径は同じように指定します(円の線の上に表示するようなもの)
- 各パイにテキストエレメントを追加して表示します
pie_chart.append("text") // 各パイにテキストエレメントを追加
.attr("transform", function(d) { // テキストを指定した場所に移動させ
return "translate("+label_arc.centroid(d)+ ")"
})
.text(function(d){return d.data.name }) // テキストの表示
;
- 簡単のパイチャートが完成しました。ソースは以下
var data_set = [
{name:"aaa", val:58},
{name:"bbb", val:88},
{name:"ccc", val:48},
{name:"ddd", val:73},
{name:"eee", val:81},
{name:"fff", val:31}
] ;
var pie_data = d3.pie()
.sort(null)
.value(function(d){return d.val;})
(data_set) ;
var color_scale = d3.scaleOrdinal()
.domain( d3.min(data_set, function(d){ return d.val; }),
d3.max(data_set, function(d){ return d.val; }))
.range( d3.schemeCategory10 )
;
var arc = d3.arc()
.outerRadius( 200 )
.innerRadius( 0 )
;
var label_arc = d3.arc()
.outerRadius( 150 )
.innerRadius( 150 )
;
var pie_chart = d3.select("#content")
.selectAll(".arc")
.data(pie_data)
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(300, 200)")
;
pie_chart.append("path")
.attr("d", arc)
.style("fill", function(d,i){
return color_scale( d.data.val ) ;
})
pie_chart.append("text")
.attr("transform", function(d) { return "translate("+label_arc.centroid(d)+ ")" })
.text(function(d){return d.data.name })
;