D3.js v5 入門|#10 面グラフを表示する

d3.js(v5) で面グラフ表示(Area Chart)する方法について記載します。
実装すると、次のような円グラフが表示できます。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

グラフを表示する場所を定義します。

3.コードの詳細( JavaScript )

3−1.X軸の設定(日付の最小・最大値、描画範囲)

X軸に年月を使用するため、d3.scaleUtc() を使用しています。
年月日や時間などの、タイムスケールを使用する場合は、d3.scaleTime() を使用しても大丈夫なのですが、今回 X軸に使用するデータは年月日(2019-01-01)までのデータのため、d3.scaleTime() を 使用すると、2019-01-01 は、2019-01-01 09:00:00 と UTC+9 で扱われ、x軸の開始点 01/01 のラベルが表示されなくなります。

d3.scaleUtc() を使用すると、年月日だけのデータでも 2019-01-01 00:00:00 と扱ってくれるため、Demoのように、 01/01 のラベルが表示されます。

domainで、X軸の最小、最大値 を設定し、range で描画範囲を設定します。

3−2.Y軸の設定(日付の最小・最大値、描画範囲)

X軸の設定と同様に、domainで、Y軸の最小・最大値を設定し、 range で描画範囲を設定します。

3−3.X軸の描画

描画対象のsvgに、X軸を描画します。

d3.axisBottom の “%m/%d” で、年月日の表示形式を指定します。
今回は、月/日 の形式で表示するようにしています。

3−4.Y軸の描画

描画対象のsvgに、Y軸を描画します。

3−5.面グラフの描画

面グラフを描画するには、描画エリアの定義に、d3.area() を使用します。

4.まとめ

d3.jsを使用して面グラフを作成しました。
X、Y軸のデータを流し込めば、簡単に描画することができます。