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）よりデータを色で表現する方法 をご参考

パイチャート作成１：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が作成されました
  

パイチャート作成２：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 ) ;  })

  

パイチャート作成３：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 }) 
      ;