D3.js v5 入門|#2 棒グラフを表示する(SVG)

d3.js の Tutorials「Let’s Make a Bar Chart Ⅱ」 を参考にして、棒グラフを作成しました。

前回は、div要素を使用して棒グラフを作成しました。今回は、SVGを使用して棒グラフを表示します。

今回描画する棒グラフはこんな感じです。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

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

3.コードの詳細( JavaScript )

3−1.グラフのデータ範囲を設定

d3.scaleLinear を使用して棒グラフを作成します。

.domain
入力するデータの範囲を指定します。
d3.max(data) は引数 dataの中の最大値を返します。今回使用するデータは、[100, 150, 200, 250, 300]なので、300が返ります。
なので、0 〜 300 が入力データの範囲となります。

.range
画面に表示するデータ範囲を指定します。
今回は、width変数に 300 を代入しているので、0 〜 300が表示データ範囲となります。

3−2.グラフを表示する要素の幅と高さを設定

d3.select(“#chart”) で、グラフを描画する要素(id=chart)を選択します。

.attr
d3.select(“#chart”)で選択した要素に属性を設定します。
今回は、幅と高さを設定しています。

3−3.データをセット & データごとのグループを追加(”g”)

.data(data)
グラフにするデータを指定します。

.enter().append(“g”)
各データをグループ化する g要素を追加します。( グラフの各青い棒は、1つの g要素に含まれます。)
HTMLで g要素は定義していないため、新たにg要素が追加されます。
enter() は新たに追加された要素を、DOMに反映させるために使用します。

.attr(“transform”, function(d, i) { return “translate(0,” + i * barHeight + “)”; });
追加する g要素の属性を定義しています。
“translate(0,” + i * barHeight + “)” では、g要素ごとのy座標の位置を計算しています。
変数barHeight の値は、20 で宣言、データは5つあるので

translate(0,0)
translate(0,20)
translate(0,40)
translate(0,60)
translate(0,80)

となり、各g要素(青い棒ごとの表示領域)のY座標を計算しています。

3−4.各データの幅と高さを設定

bar.append(“rect”) で、g要素内に、グラフの棒部分を表現する要素 rect を追加します。
この rect が グラフの青い棒の正体です。

rect に属性(幅と高さ)を設定して、青い棒の幅と高さを指定しています。

3−5.各データに表示するテキストを設定

bar.append(“text”) で、各 g要素にテキストを設定しています。

.attr
属性 x、y、dy を text要素に設定しています。それぞれの意味はコメントの通りです。

.text
テキストに表示する値を設定します。

4.グラフ描画後のHTML(svg要素を抜粋)

棒グラフの各データごとに g要素が生成され、その内部に rect、text要素が生成されています。

5.まとめ

svgを使用してグラフを作成しました。d3.js のお作用的な書き方があるので、慣れるまで若干違和感があるかもしれません。

次回は、グラフのデータを 外部ファイル(tsv)から読み込んでグラフを作成したいと思います。