【D3.js】おさらい1回目 棒グラフ

最終更新日

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのですが、よくよく考えてみると棒グラフとか折れ線グラフとかD3を使った基本的なグラフの作成方法について記事を書いたことが無かったな、ということに気付いたので改めてD3についておさらいしていくことに決めました。

ライブラリを読み込む

まず基本ですが、D3ライブラリを読み込みます。

データセットを用意する

今回使用するデータセットは以下。このデータを棒グラフとして表示します。

SVGを使って棒グラフ(横)を作成する

svg要素を設置する

まずは、body要素のなかにsvg要素を設置します。
このsvgタグが今回グラフが表示されるステージとなります。
高さ200px、幅300pxに指定しています。

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

データの値を正規化するscale関数を作成します。
今回作成したscale関数は「ゼロ〜データ(val1)の最大値」間の値を、「ゼロ〜ステージの高さ」までの値に変換します。

データセットを束縛しrect要素を追加します

svg要素に対して架空のrect要素を選択し(この時点ではまだドキュメントにrect要素は存在しない)、データセットを束縛して足りないrect要素を追加します。
attrメソッドを使って各rect要素に属性値を設定、y属性(縦位置)はデータセットのインデックスを元に指定し、width属性(幅)はデータセットのval1の値を正規化して適用しています。

セレクションメソッドやenterメソッドの動作についてもっと詳しく知りたい方は以下を参照してください。
D3 – セレクションの仕組み

・実行結果
ここまでのコードを実行した結果が以下です。
横向きのグラフが表示されます。
d3barchart000000

次は、このグラフを縦に表示されるように修正します。

SVGを使って棒グラフ(縦)を作成する

縦表示に変更する

y属性に指定していたコールバックとx属性の値を入れ替えます。
また、width属性に指定していたコールバックとheight属性の値を入れ替えます。
この変更によって、各rect要素に設定される値が、x属性(横位置)はデータセットのインデックスを元に指定され、height属性(高さ)はデータセットのval1の値を正規化した値が適用されるようになります。

・実行結果
コードを修正して実行した結果が以下となります。
グラフが上から下へ向かって表示されるようになりました。
d3barchart000001

後ほどグラフの向きを反転(下から上へ向かって表示)させますが、その前に次は目盛り軸を作成します。

目盛りを表示する

マージンを設定する

今回は目盛りをグラフの左側に表示します。
このままでは、目盛り要素を表示するスペースが無いのでまずマージンを設定します。

マージンがグラフに反映されるようにコードを修正します。

目盛りを作成する

目盛りを作成するには、まずd3.svg.axisメソッドを使ってaxisオブジェクト(yAxisCall)を生成します。
その後、svg要素にg要素(グループ要素)を一つ追加し、callメソッドに作成したyAxisCallオブジェクトを渡します。

・実行結果
修正したコードを実行した結果が以下となります。

d3barchart000002

目盛りをデザインする

表示されている目盛りをスタイルシートを使用して見た目を変更します。
前回、attrメソッドを使って指定したクラス名を元にpaht要素とline要素にスタイルを適用します。

・実行結果
上記のスタイルを適用した結果が以下となります。
d3barchart000003

次はいよいよ、グラフの上下を反転させます。

反転する

スケールを反転させる

先ずはscale関数のrange(出力範囲)を反転します。
この修正によって大きい値のデータほどscale関数を適用すると、小さい数値に正規化されて出力されます。

・実行結果
yAxisCallオブジェクトは出力する目盛りの値を読み込んでいるscale関数を元に生成しているので、scale関数を修正したことによって出力される目盛りも反転され下に行くほど少ない値が表示されるようになります。
d3barchart000004

グラフの高さを反転させる

上記の実行結果をよく見るとグラフの値が実際のデータの値と反対になっていることに気付くと思います。
そこで、attrメソッドで適用しているrect要素のheight属性を「正規化したデータの値」から「ステージの高さ-正規化したデータの値」に変更します。

・実行結果
修正したコードを実行した結果が以下です。
d3barchart000005

グラフの表示位置(縦)を反転させる

最後の仕上げとして、各rect要素のy属性を調整しグラフを下方向に揃えます。

・実行結果
これでひとまず棒グラフ(縦)の完成です
d3barchart000006

動的にグラフを変化させる

ついでなので、イベント実行時にグラフを動的に変化するようにしてみます。
今回は、body要素上でクリックされたら、表示するグラフをval1からval2のグラフへと変化させてみます。

イベントを設置する

まずは、body要素にイベントを設置しアラートが正しく実行されるかテストします。

正常に動作することが確認できたらalertは削除してください。

スケールを更新する

正規化する対象をデータセットのval1からval2へと変更するため、スケールの適用範囲を「ゼロからval2の最大値」へと更新します。

目盛りを更新する

さらに、目盛りの表記をval1に対するものからval2に合わせたものへ変更するのために、xAxisオブジェクトに再度yAxisCalオブジェクトを渡して更新します。

棒グラフを更新する

最後に各rect要素のy属性値・height属性を更新します。

・実行結果
クリックイベント発生後の実行結果が以下です。
グラフの内容がデータセットのval2の値を元にしたものに変更され、目盛りもそれに合わせた値に変更されています。

d3barchart000008

アニメーションさせる

val1グラフからval2グラフへの変更の際にアニメーションされるようにコードを修正します。
transitionメソッドを間に挟むだけなので簡単です。

以上です。
次回は、折れ線グラフをおさらいします。


サンプルコード