【D3.js】おさらい2回目 線グラフ

棒グラフに続いて、今回は(折れ)線グラフを作成します。
前回説明した内容については省略しますので、不明な点があれば先の記事を読んでください。

データセットを用意する

今回使用するデータは以下です。

折れ線グラフを表示する

ステージを用意する

前回同様svg要素を設置し、さらにその中にg(グループ要素)を設置します。
実際の折れ線グラフを描く要素は、このg要素の中に追加していきます。

値を正規化するscale関数を作成する

今回はx軸用、y軸用に2つ作成します。この時点ではdomain範囲は指定せずrangeだけ設定しておきます。

データセットの型変換を行う

データセットのdateの値が現在はstring型になっています。このままでは正しい計算が行えないので、parse関数を作成しデータセットの型変換を行います。

scale関数のドメイン設定を行う

改めてscale関数のドメイン設定を行います。データセットの型変換を行う前に設定してしまうと、正しく計算されないので注意しましょう。
ちなみに、d3.extentはデータセットの最少値と最大値を含む配列を返すメソッドです。

ライン描画関数を作成する

データセットを元にライン(線グラフ)を描くライン描画関数を作ります。

作成したライン描画関数は、引数にデータセットを指定するとsvg:pathのパスデータを返します。
実際に正しくパスデータが出力されるか試してみましょう。
問題がなければ下記のようにパスデータが出力されます。
valueline
この時点でエラーが出る場合は、スケールの設定やデータセットの型変換が正しく行われているか確認してください。

折れ線グラフを描画する

ステージにpath要素を追加しd属性にライン描画関数から出力されるパスデータを渡します。

実行結果

line000000

これで折れ線グラフが表示されました。
某グラフの時と違い、ひとつのPATH要素でデータセットを表現していることに注意してください。

次は、目盛りを追加します。

目盛りを表示する

x軸,y軸の目盛りを作成する

目盛りを表示します。今回は、x軸とy軸二つ作成します。

実行結果

d3linechart000000
位置がずれていないか、パスの頂点が正しくデータの内容を示しているか確認してください。

目盛りをデザインする

スタイルシートを使用して目盛りのデザインを行います。

実行結果

d3linechart000001

補完方法を変更する

d3は、点と点を結ぶラインの座標を自動的に計算し補完してくれますが、interpolateメソッドを使用することで補完方法を変更することができます。

ライン描画関数を修正する

実際にinterpolateメソッドを使って、頂点間の補完方法を変更してみます。

実行結果

d3linechart000002

以上です。interpolateメソッドで指定できる補完方法にはいろいろあるので試してみてください。
次回は、面グラフを作成とグリッド目盛りの表示をおさらいします。


サンプルコード

カテゴリー: D3v3