D3.js パイチャート(Pie Chart)の作成

D3で基本チャートの円形(pie)チャートを作成する方法を説明する。

サンプルプログラム

サンプルコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Pie Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <script>
  // 1. データ準備
  var dataset = [
    { "name": "A", "value": 5 },
    { "name": "B", "value": 6 },
    { "name": "C", "value": 8 },
    { "name": "D", "value": 1 },
    { "name": "E", "value": 2 },
    { "name": "F", "value": 6 },
    { "name": "G", "value": 8 },
    { "name": "H", "value": 6 },
    { "name": "I", "value": 10 },
    { "name": "J", "value": 9 }
  ]

  var width = 400; // グラフ幅
  var height = 300; // グラフ高さ
  var radius = Math.min(width, height) / 2 - 10;

  // 2. SVG領域設定
  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

  var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  // 3. カラー設定
  var color = d3.scaleOrdinal()
    .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"]);

  // 4. pieチャートdataset用の関数設定
  var pie = d3.pie()
    .value(function(d) { return d.value; })
    .sort(null);

  // 5. pieチャートSVG要素設定
  var pieGroup = g.selectAll(".pie")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "pie");

  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

  pieGroup.append("path")
    .attr("d", arc)
    .attr("fill", function(d) { return color(d.index) })
    .attr("opacity", 0.75)
    .attr("stroke", "white");

  // 6. pieチャートテキストSVG要素設定
  var text = d3.arc()
    .outerRadius(radius - 30)
    .innerRadius(radius - 30);

  pieGroup.append("text")
    .attr("fill", "black")
    .attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; })
    .attr("dy", "5px")
    .attr("font", "10px")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.data.name; });
  </script>
</body>

</html>

サンプルコード説明

1. データ準備

円形チャートを描画するためのデータを準備する。JavaScriptの標準関数Math.minを使用して円形チャートの半径を設定する。

var radius = Math.min(width, height) / 2 - 10;

2. SVG領域設定

円形チャートを表示するSVG表示領域を設定する。円形チャートは基本的に原点0,0を中心に描画されるため、画面中央へ移動する。

var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

<g>要素を設定し、その中に円形チャートのSVG要素を設定する。

3. カラー設定

円形チャートを描画するカラースケールを、D3メソッドd3.scaleOrdinalを使用して設定する。

var color = d3.scaleOrdinal()
  .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"]);

d3.scaleOrdinalは、rangeに設定された配列を繰り返し呼び出す関数を設定する。今回は5色を呼び出す関数をcolorとして設定して使用する。

4. pieチャートdataset用の関数設定

提供されたデータdatasetをpieチャートのデータに変換する関数を、D3のメソッドd3.pieを使用して設定する。

var pie = d3.pie()
  .value(function(d) { return d.value; })
  .sort(null);

データセットを設定した関数に代入すると(pie(dataset))、変換されたデータが出力される。
.valueで各円形チャートの大きさを決定する値を設定する。.sort(null)で順序を並べ替えない設定にしている。.sort()は任意であり、省略すると値が大きい順に並べ替えられる。

変換後のデータは、次の値が設定されたオブジェクトの配列になる。

値	説明
`data`	元データへの参照
`value`	円形チャート要素の値
`index`	円形チャート要素のインデックス（ソート後）
`startAngle`	円弧の開始角度
`endAngle`	円弧の終了角度
`padAngle`	要素間の隙間角度

5. pieチャートSVG要素設定

設定した関数pieを使用してデータを設定する。

  var pieGroup = g.selectAll(".pie")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "pie");

始める前に"g"要素を設定し、その中に円形チャートの扇形("path"要素)と文字列("text"要素)を設定する。

円形チャートの扇形"path"要素の"d"属性を設定する関数を、D3のメソッドd3.arc()を使用して設定する。

  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

  pieGroup.append("path")
    .attr("d", arc)
    .attr("fill", function(d) { return color(d.index) })
    .attr("opacity", 0.75)
    .attr("stroke", "white");

d3.arc()は、.outerRadius(..)で外側の半径を、.innerRadius(..)で内側の半径を設定する。たとえば.innerRadius(..)に0ではない値を設定する。

  arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(85);

すると、次のようにドーナツチャートを作成できる。

6. pieチャートテキストSVG要素設定

ラベルのテキストを設定する。

  var text = d3.arc()
    .outerRadius(radius - 30)
    .innerRadius(radius - 30);

  pieGroup.append("text")
    .attr("fill", "black")
    .attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; })
    .attr("dy", "5px")
    .attr("font", "10px")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.data.name; });

テキスト配置のためにd3.arc()を再度呼び出し、textにメソッドを設定する。
.centroid(..)メソッドにpieチャート用に変換されたデータを挿入すると、パイチャートの半径方向の中央位置にテキストを設定できる。
扇形の.innerRadius(..)を0に設定しているため、テキストを中央より少し外側に表示したくて新しくメソッドを呼び出している。
先ほどのドーナツチャートの場合は、中央位置にテキストを配置する方が見やすいため、テキスト表示のためにd3.arcを呼び出す必要はなく、text.centroid(d)の部分をarc.centroid(d)にすれば前の例と同じように中央に配置できる。