D3.js v5 入門|#3 棒グラフに余白と軸を表示する(SVG)

d3.js の Tutorials「Let’s Make a Bar Chart Ⅲ」 を参考にして、棒グラフに余白と軸を表示します。
前回は軸なし棒グラフを作成しました。

今回は、次の棒グラフを作成します。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

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

3.コードの詳細( JavaScript )

3−1.グラフ全体の設定

グラフ全体の設定では、グラフを描画する領域のサイズと余白を定義します。

領域全体の大きさは、高さ 400px、幅 500pxの領域で、上下左右に 50pxの余白があります。図にすると次のようになります。

ポイントは 次の箇所になります。

グループを追加し、そのグループ配下の要素に余白分(左・上)移動するようにしています。

3−2.X軸の設定

X軸に表示する実際の値(domain)、描画する幅(range)、グラフの間隔(padding)を設定します。
その設定値を用いて、軸用のグループ要素(g)をグラフに追加します。

3−3.Y軸の設定

Y軸もX軸同様に設定を行い、軸用のグループ要素(g)をグラフに追加します。

3−4.各データを描画

最後に、各データを描画します。

x:座標のどの位置(x)から描画するか
y:座標のどの位置(y)から描画するか
height:描画する高さ
width:描画する幅

3−5.描画後のsvg領域

描画後のsvg領域は、大まかに次のようになります。

① 全体のsvg領域
② 余白分、左・上 を移動
③ X軸のグループ
④ Y軸のグループ
⑤ 各データの描画(rect)

4.まとめ

棒グラフに、余白と軸を追加しました。
コードベースでは若干イメージしづらいかもしれませんが、描画後のコードと突き合わせると、各処理が理解しやすいと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする