D3.js v4/v5 棒グラフ(bar chart) – 基本サンプル

2018-02-23

簡単な棒グラフを作成します。

サンプルデモ

 

サンプルプログラム

解説

1. データの準備

軸を表示する幅を確保するために、paddingを変数として用意します。上下左右にpaddingで設定した幅のマージンを設定します。

2. SVG領域の設定

bodyの中にsvgタグを設定し、描画する領域を準備します。

3. 軸スケールの設定

軸の幅を画面の幅に合わせるスケール変換と軸の表示のための関数を準備します。

x軸は、D3の関数d3.scaleBand()を使って設定します。

まず、

でスケールの表示レンジを四捨五入で設定します。今回はグラフ両端にpadding分隙間をつくりますのでx軸をpadding ~ width-paddingのレンジで設定します。

で棒グラフのバーとバーの間の隙間を設定します。0.0~1.0の割合で設定します。

の部分で、横軸のラベル(name)と数を設定します。引数をmapに変換して設定します。ここで設定したラベルの文字列がx軸に表示されます。

y軸は、D3の関数d3.scaleLinear()を使って設定します。

d3.scaleLinear()はdomainで設定したスケールをrangeで設定したスケールに等倍で変換するものです。domainにグラフ中の座標値として0から数値(value)の最大値(d3.maxで取得)を設定し、rangeに表示上の距離として、paddingを考慮したレンジを設定します。y軸は画面下に行くほど値が大きくなりますので、y=0に画面下側の大きな値(height-padding)を設定しています。

4. 軸の表示

x, y軸を設定します。

x軸はグラフの高さ分、y軸はx軸の表示マージン分ずらして設定します。

は軸のsvg要素表示用の関数で、callで呼び出すとsvg要素のline等を使って軸の刻みを表示します。

5. バーの表示

バーを表示します。 xScaleには、d3.scaleBand()で呼び出した関数が設定されていますが、mapした軸ラベル(d.name)を引数とすると各座標が呼び出せるようになっています。また、.bandwidth()で設定したpadding()を考慮した幅を取得します。”rect”は上から右下に向かって四角形を表示するので、”y”属性がバーの上側の座標となることにご注意ください。

まとめ

軸を表示するためにグラフの上下左右にマージンを設定することと、y座標が逆転するところが混乱する点です。一度テンプレートを作ってしまえば迷うことはないかと思います。