D3.js v4/v5 折れ線グラフ(line chart)の作り方

2018-02-26

D3での基本チャート、折れ線グラフの作り方を紹介します。

サンプルデモ

サンプルプログラム

解説

こちらのチュートリアルで散布図を書く方法を詳しく紹介しています。折れ線グラフは、5プロットの部分を少し変更すれば作成することができます。

1. データの準備

マージンを設定するために、オブジェクトを用意します。

軸を表示するため、下側と左側のマージンを大きめに設定しています。

2. SVG領域の設定

SVGの表示領域を設定します。

3. 軸スケールの設定

軸スケールを設定します。

はdomainで設定したレンジをrangeで設定したレンジに変換する関数を設定します。折れ線グラフの座標を画面上のピクセル値に変換する関数を作成します。

4. 軸の表示

D3の関数d3.axisBottom()とd3.axisLeft()を使って軸要素を設定します。引数を軸スケールの設定で設定した関数とし、callで呼び出すことでSVG要素が自動的に追加されます。

.ticks()は軸メモリの数を制御するメソッドです。整数で設定します。

軸を呼び出した後、text要素で軸のラベルを追加します。

“text-anchor”はテキストの位置揃えをするための属性で、”middle”で中央揃えを設定しています。軸に重ならないように35px移動しています。

5. ラインの表示

折れ線グラフのラインを”path”要素で表示します。データバインド時に

を用いています。ひとつづつのデータをバインドするdataと異なり、path一つにデータセットを追加するためdatumを用います。

はSVG要素のpathの”d”属性を作成するメソッドです。

まとめ

折れ線グラフは、棒グラフ散布図と同じアルゴリズムで作成できます。一つ作ってしまえば他のグラフに簡単に転用できます。