d3.js の Tutorials「Let’s Make a Bar Chart Ⅱ」 を参考にして、棒グラフを作成しました。
前回は、div要素を使用して棒グラフを作成しました。今回は、SVGを使用して棒グラフを表示します。
今回描画する棒グラフはこんな感じです。
目次
１．全体のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html> <head> <title>d3</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/d3.min.js"></script> <style type="text/css"> #chart rect { fill: steelblue; } #chart text { fill: white; font: 10px sans-serif; text-anchor: end; } </style> </head> <body> <svg id="chart"></svg> <script> var data = [100, 150, 200, 250, 300]; var width = 300, barHeight = 20; // ① グラフのデータ範囲を設定 var x = d3.scaleLinear() .domain([0, d3.max(data)]) // 入力データの範囲を指定 .range([0, width]); // 画面に表示するデータ範囲を指定 // ② グラフを表示する要素の幅と高さを設定 var chart = d3.select("#chart") .attr("width", width) .attr("height", barHeight * data.length); // ③ グラフのデータをセット & 各データごとのグループを追加（"g"） var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); // ④ 各データの幅と高さを設定 bar.append("rect") .attr("width", x) .attr("height", barHeight -1); // 各棒グラフの間に隙間を開ける // ⑤ 各データに表示するテキストを設定 bar.append("text") .attr("x", function(d) { return x(d) - 10; }) // テキストの位置（x軸方向） .attr("y", barHeight / 2) // 各棒グラフの中央位置にテキストを表示 .attr("dy", ".35em") // テキストの表示位置を調整（y方向） .text(function(d) { return d; }); // テキストに表示する値 </script> </body> </html> |
２．コードの詳細（ HTML ）
グラフを表示する場所を定義します。
|
1 |
<svg id="chart"></svg> |
３．コードの詳細（ JavaScript ）
３−１．グラフのデータ範囲を設定
d3.scaleLinear を使用して棒グラフを作成します。
|
1 2 3 4 |
// ① グラフのデータ範囲を設定 var x = d3.scaleLinear() .domain([0, d3.max(data)]) // 入力データの範囲を指定 .range([0, width]); // 画面に表示するデータ範囲を指定 |
.domain
入力するデータの範囲を指定します。
d3.max(data) は引数 dataの中の最大値を返します。今回使用するデータは、[100, 150, 200, 250, 300]なので、300が返ります。
なので、0 〜 300 が入力データの範囲となります。
.range
画面に表示するデータ範囲を指定します。
今回は、width変数に 300 を代入しているので、0 〜 300が表示データ範囲となります。
３−２．グラフを表示する要素の幅と高さを設定
d3.select(“#chart”) で、グラフを描画する要素（id=chart）を選択します。
|
1 2 3 4 |
// ② グラフを表示する要素の幅と高さを設定 var chart = d3.select("#chart") .attr("width", width) .attr("height", barHeight * data.length); |
.attr
d3.select(“#chart”)で選択した要素に属性を設定します。
今回は、幅と高さを設定しています。
３−３．データをセット & データごとのグループを追加（”g”）
|
1 2 3 4 5 |
// ③ グラフのデータをセット & 各データごとのグループを追加（"g"） var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); |
.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 で宣言、データは５つあるので
translate(0,0)
translate(0,20)
translate(0,40)
translate(0,60)
translate(0,80)
となり、各g要素（青い棒ごとの表示領域）のY座標を計算しています。
３−４．各データの幅と高さを設定
bar.append(“rect”) で、g要素内に、グラフの棒部分を表現する要素 rect を追加します。
この rect が グラフの青い棒の正体です。
|
1 2 3 4 |
// ④ 各データの幅と高さを設定 bar.append("rect") .attr("width", x) .attr("height", barHeight -1); // 各棒グラフの間に隙間を開ける |
rect に属性（幅と高さ）を設定して、青い棒の幅と高さを指定しています。
３−５．各データに表示するテキストを設定
bar.append(“text”) で、各 g要素にテキストを設定しています。
|
1 2 3 4 5 6 |
// ⑤ 各データに表示するテキストを設定 bar.append("text") .attr("x", function(d) { return x(d) - 10; }) // テキストの位置（x軸方向） .attr("y", barHeight / 2) // 各棒グラフの中央位置にテキストを表示 .attr("dy", ".35em") // テキストの表示位置を調整（y方向） .text(function(d) { return d; }); // テキストに表示する値 |
.attr
属性 x、y、dy を text要素に設定しています。それぞれの意味はコメントの通りです。
.text
テキストに表示する値を設定します。
４．グラフ描画後のHTML（svg要素を抜粋）
棒グラフの各データごとに g要素が生成され、その内部に rect、text要素が生成されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<svg id="chart" width="300" height="100"> <g transform="translate(0,0)"> <rect width="100" height="19"></rect> <text x="90" y="10" dy=".35em">100</text> </g> <g transform="translate(0,20)"> <rect width="150" height="19"></rect> <text x="140" y="10" dy=".35em">150</text> </g> <g transform="translate(0,40)"> <rect width="200" height="19"></rect> <text x="190" y="10" dy=".35em">200</text> </g> <g transform="translate(0,60)"> <rect width="250" height="19"></rect> <text x="240" y="10" dy=".35em">250</text> </g> <g transform="translate(0,80)"> <rect width="300" height="19"></rect> <text x="290" y="10" dy=".35em">300</text> </g> </svg> |
５．まとめ
svgを使用してグラフを作成しました。d3.js のお作用的な書き方があるので、慣れるまで若干違和感があるかもしれません。
次回は、グラフのデータを 外部ファイル（tsv）から読み込んでグラフを作成したいと思います。