D3.js を使って円グラフを描画するには、d3.pie() と d3.arc() を組み合わせて使用します。
d3.pie() 関数で扇形の角度を計算する
D3.js の d3.pie() 関数を使うと、円グラフ (pie chart) やドーナツチャート (donut chart) を描画するための角度を計算する関数オブジェクトを生成できます。
生成した関数にデータ配列を渡すと、各データに対応する扇形部分の開始角度 (startAngle) と終了角度 (endAngle) を計算してくれます。
角度はラジアンで表現されるので、180° は 3.1415 になります。
const data = [5, 3, 2]
const pie = d3.pie() // pie 関数の生成
const arcs = pie(data) // データ配列から角度情報を求める
console.log(args);
[
{
"data": 5, "index": 0, "value": 5, "startAngle": 0,
"endAngle": 3.141592653589793, "padAngle": 0
},
{
"data": 3, "index": 1, "value": 3, "startAngle": 3.141592653589793,
"endAngle": 5.026548245743669, "padAngle": 0
},
{
"data": 2, "index": 2, "value": 2, "startAngle": 5.026548245743669,
"endAngle": 6.283185307179586, "padAngle": 0
}
]
d3.arc() 関数で SVG の path 情報に変換する
SVG にはネイティブで円グラフを描画するための要素は存在しないので、扇形の図形などを表現するための path 要素を作成しなければいけません。
D3.js の d3.arc() 関数を使用すると、扇形用の path 要素の d 属性の値を求めるための関数 (arc ジェネレーター) を生成できます。
生成した関数には、各扇形の開始角度 (startAngle) と終了角度 (endAngle) を渡します。
// 内側の半径 (innerRadius) を 0 より大きくするとドーナツチャートになる
const arc = d3.arc().innerRadius(0).outerRadius(100)
// path 要素の d 属性用の値を求める
console.log(arc({ startAngle: 0, endAngle: 3.1415 }))
console.log(arc({ startAngle: 3.1415, endAngle: 5.0265 }))
console.log(arc({ startAngle: 5.0265, endAngle: 6.2831 }))M0,-100A100,100,0,0,1,0.009,100L0,0Z
M0.009,100A100,100,0,0,1,-95.107,-30.897L0,0Z
M-95.107,-30.897A100,100,0,0,1,-0.009,-100L0,0Zd3.pie() と d3.arc() を組み合わせて円グラフを描画する
上記で説明した関数を利用すれば、次のような手順でデータ配列を円グラフとして描画できます。
d3.pie()を使って、データ配列を角度情報（startAngleとendAngle）に変換する。d3.arc()を使って、角度情報をpath要素用のd属性の値に変換する。- 上記のように作成したデータをもとに
path要素を生成する。
次の例では、データ配列 ([5, 3, 2]) を入力情報として円グラフを描画しています。
ちなみに、扇形の色 (fill) の設定には、d3.scaleOrdinal() で生成したカラースケール関数 を使用しています。
<svg id="svg-7wvnsew" width="300" height="200"></svg>
<script>
const svg = d3.select("#svg-7wvnsew")
const width = +svg.attr("width")
const height = +svg.attr("height")
const data = [5, 3, 2] // データ配列
const pie = d3.pie() // 扇形の角度を求める関数
const arc = d3.arc().innerRadius(0).outerRadius(100) // 角度からパスを生成する関数
const color = d3.scaleOrdinal(d3.schemeCategory10) // インデックスから色を生成する関数
// 円グラフ用の g 要素を作って SVG の中央に表示するよう位置調整
const pieChart = svg.append("g")
.attr("transform", `translate(${width/2}, ${height/2}) scale(0.8)`)
// 円グラフの各扇形の path 要素を作成する
pieChart
.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc)
.attr("fill", (_, i) => color(i))
</script>
表示方法のカスタマイズ
ドーナツチャート
arc ジェネレーターの innerRadius() メソッドで、内側の半径を設定すると、ドーナツチャートを描画することができます。
const arc = d3.arc().innerRadius(50).outerRadius(100)
扇形の隙間
arc ジェネレーターの padAngle() メソッドで、各扇形の間の隙間を指定することができます。
この隙間は、ラジアン単位の角度で指定するので、かなり小さい値を指定する必要があります（1 度は 0.017453 ラジアンです）。
// padAngle() を設定するときは innerRadius() も調整する
const arc = d3.arc().innerRadius(1).outerRadius(100).padAngle(0.02)
扇形の境界を表現する方法としては、各扇形の path 要素に stroke スタイルを設定する方法もあります。
むしろこちらの方がシンプルでよいかもしれません。
下記では分かりやすいように黄色で境界線を描画しています。
pieChart
.selectAll("path")
.data(pie(data))
.join("path")
.attr("d", arc)
.attr("fill", (_, i) => color(i))
.attr("stroke", "yellow")
.attr("stroke-width", 2)ドーナツチャートの中心にテキストを表示
ドーナツチャートの中心の隙間にテキストを表示するには、単純に SVG の text 要素を追加するだけです。
pieChart.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("text-anchor", "middle") // 水平方向のアンカー
.attr("dominant-baseline", "middle") // 垂直方向のアンカー
.attr("font-size", 20)
.attr("font-weight", 600)
.attr("fill", "#666")
.text("合計:" + d3.sum(data))
扇形（円弧）の中にテキストを表示
pie(data) で生成した各データを arc.centroid() メソッドに渡すと、扇形の領域の中央座標（重心）を返してくれます。
これを利用して、各扇形（あるいは円弧）の中央にテキストを配置することができます。
ちょっと複雑なので全体のコードを示しておきます。
<svg id="svg-t2om9my" width="300" height="200"></svg>
<script>
const svg = d3.select("#svg-t2om9my")
const width = +svg.attr("width")
const height = +svg.attr("height")
const data = [5, 3, 2]
const pie = d3.pie()
const arc = d3.arc().innerRadius(50).outerRadius(100)
const color = d3.scaleOrdinal(d3.schemeCategory10)
// 円グラフ全体の g 要素
const pieChart = svg.append("g")
.attr("transform", `translate(${width/2}, ${height/2}) scale(0.8)`)
// 各データごとに g 要素を作っておく
const pieElems = pieChart.selectAll(".pie-elems")
.data(pie(data))
.enter()
.append("g")
.attr("class", "pie-elems")
// 各扇形の path 要素を作成
pieElems
.append("path")
.attr("d", arc).attr("fill", (_, i) => color(i))
.attr("stroke", "white")
.attr("stroke-width", 2)
// 各扇形の中央に text 要素を追加
pieElems
.append("text")
.attr("transform", (d) => `translate(${arc.centroid(d)})`)
.attr("text-anchor", "middle") // 水平方向のアンカー
.attr("dominant-baseline", "middle") // 垂直方向のアンカー
.attr("font-size", 20)
.attr("fill", "white")
.text((d) => d.value)
</script>