D3.jsとは

D3.jsとは、様々な種類のグラフを描くためのJavaScriptライブラリです。SVGで描画されるのできれいですし、アニメーションも可能です。
ここでは、はじめてD3.jsを使う方向けに円グラフを描画するコードを説明します。

環境情報

D3.js ver.7
Node.js ver.16
webpack ver.5

グラフを描いてみよう

事前にnpm install -D webpack webpack-cliでwebpackをインストール済であることを想定しています。（設定はデフォルトのまま）

インストール

D3.jsはnpm/yarnでインストールできます。

$ npm install d3
# or
$ yarn add d3

描画領域をつくる

HTMLファイルにグラフを描画するSVG要素を作っておく必要があります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>d3サンプル</title>
  </head>
  <body>
    <!--  ここにグラフを描画-->
    <svg id="sample" viewBox="0 0 500 500"></svg>
　　<script src="dist/main.js"></script>
  </body>
</html>

src/index.js

import * as d3 from "d3";

// データ
const data = [
	{ name: "やまだ", value: 5 },
	{ name: "たなか", value: 10 },
	{ name: "さとう", value: 15 },
	{ name: "いけだ", value: 30 },
	{ name: "こやま", value: 20 },
];

// データの各値に対して、円グラフ描画に必要な情報（描画開始/終了角度、順番など）を生成する
const pie = d3.pie().value((d) => d.value)(data);

// 円グラフの描画領域を作り、データを適用する
const node = d3
	.select("svg")
	.selectAll("g")
	.data(pie)
	.enter()
	.append("g")
	.attr("transform", "translate(300,300)");

// 円グラフの設定をする
const arc = d3.arc().outerRadius(100).innerRadius(0);

// 色分け
const colors = ["#e57373", "#9575CD", "#4FC3F7", "#81C784", "#FFF176"];

// 円グラフを描画する
node
	.append("path")
	.attr("d", arc)
	.attr("fill", (_, i) => {
		return colors[i % colors.length];
	});

初期化

グラフを描く

  // データの各値に対して、円グラフ描画に必要な情報（描画開始/終了角度、順番など）を生成する
  const pie = d3.pie()
                .value((d) => d.value)
                (data);

データが単純な数値の配列でない場合はvalue()の引数で値を指定します。こうすると、円グラフジェネレーターを返してくれます。これにデータを渡すことでグラフを描画するためのデータを作ることができます。

  // 円グラフの描画領域を作り、データを適用する
  const node = d3
    .select("svg")
    .selectAll("g")
    .data(pie)
    .enter()
    .append("g")
    .attr("transform", "translate(300,300)");

select()：HTML内の描画場所を指定します。
selectAll()：D3.jsではまず操作対象を指定する必要がありますので要素を指定します。（この時点ではまだ要素は存在しない）
data()：データを渡し、これに続く処理をデータの個数分実行します。
enter()：データのプレースホルダを作成し参照を返します。
append("g")：プレースホルダに円グラフの各領域を描画するため、グループ要素gを追加します。
attr("transform", "translate(300,300)")：デフォルトでは原点を中心に描画されるので、円グラフを移動させて全体が表示されるようにします。

円グラフを描くため、まずは円の大きさを設定します。

const arc = d3.arc()
              .outerRadius(100)  // 円の大きさ
              .innerRadius(0);   // 中抜きの円の大きさ（ドーナツグラフを描くなら1以上を設定。）

最後に円グラフの各部分を描画します。
pathはSVGで図形を描画するパス要素を指しており、dでその形状を、fillで塗りつぶし色を指定します。

// 色分け
const colors = ["#e57373", "#9575CD", "#4FC3F7", "#81C784", "#FFF176"];

// 円グラフを描画する
node
 .append("path")
 .attr("d", arc)
 .attr("fill", (_, i) => {
    return colors[i % colors.length];
  });

まとめ

D3.jsは独特の書き方があるため、最初はとっつきにくいですが簡単にグラフを描画することができます。

D3.jsに入門してみた