D3.js v4/v5 棒グラフ(bar chart) – 基本サンプル
簡単な棒グラフを作成します。
サンプルデモ
サンプルプログラム
|
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 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 bar chart basic</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 1. データの準備 var dataset = [ { "name": "A", "value": 5 }, { "name": "B", "value": 6 }, { "name": "C", "value": 8 }, { "name": "D", "value": 1 }, { "name": "E", "value": 2 }, { "name": "F", "value": 6 }, { "name": "G", "value": 8 }, { "name": "H", "value": 6 }, { "name": "I", "value": 10 }, { "name": "J", "value": 9 } ] var width = 400; // グラフの幅 var height = 300; // グラフの高さ var padding = 30; // スケール表示用マージン // 2. SVG領域の設定 var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); // 3. 軸スケールの設定 var xScale = d3.scaleBand() .rangeRound([padding, width - padding]) .padding(0.1) .domain(dataset.map(function(d) { return d.name; })); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([height - padding, padding]); // 4. 軸の表示 svg.append("g") .attr("transform", "translate(" + 0 + "," + (height - padding) + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("transform", "translate(" + padding + "," + 0 + ")") .call(d3.axisLeft(yScale)); // 5. バーの表示 svg.append("g") .selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return xScale(d.name); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - padding - yScale(d.value); }) .attr("fill", "steelblue"); </script> </body> </html> |
解説
1. データの準備
軸を表示する幅を確保するために、paddingを変数として用意します。上下左右にpaddingで設定した幅のマージンを設定します。
2. SVG領域の設定
bodyの中にsvgタグを設定し、描画する領域を準備します。
3. 軸スケールの設定
軸の幅を画面の幅に合わせるスケール変換と軸の表示のための関数を準備します。
x軸は、D3の関数d3.scaleBand()を使って設定します。
|
1 2 3 4 |
var xScale = d3.scaleBand() .rangeRound([padding, width - padding]) .padding(0.1) .domain(dataset.map(function(d) { return d.name; })); |
まず、
|
1 |
.rangeRound([padding, width - padding]) |
でスケールの表示レンジを四捨五入で設定します。今回はグラフ両端にpadding分隙間をつくりますのでx軸をpadding ～ width-paddingのレンジで設定します。
|
1 |
.padding(0.1) |
で棒グラフのバーとバーの間の隙間を設定します。0.0～1.0の割合で設定します。
|
1 |
.domain(dataset.map(function(d) { return d.name; })); |
の部分で、横軸のラベル(name)と数を設定します。引数をmapに変換して設定します。ここで設定したラベルの文字列がx軸に表示されます。
y軸は、D3の関数d3.scaleLinear()を使って設定します。
|
1 2 3 |
var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([height - padding, padding]); |
d3.scaleLinear()はdomainで設定したスケールをrangeで設定したスケールに等倍で変換するものです。domainにグラフ中の座標値として0から数値(value)の最大値(d3.maxで取得)を設定し、rangeに表示上の距離として、paddingを考慮したレンジを設定します。y軸は画面下に行くほど値が大きくなりますので、y=0に画面下側の大きな値(height-padding)を設定しています。
4. 軸の表示
x, y軸を設定します。
|
1 2 3 4 5 6 7 |
svg.append("g") .attr("transform", "translate(" + 0 + "," + (height - padding) + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("transform", "translate(" + padding + "," + 0 + ")") .call(d3.axisLeft(yScale)); |
x軸はグラフの高さ分、y軸はx軸の表示マージン分ずらして設定します。
|
1 2 |
d3.axisBottom(xScale) d3.axisLeft(yScale) |
は軸のsvg要素表示用の関数で、callで呼び出すとsvg要素のline等を使って軸の刻みを表示します。
5. バーの表示
|
1 2 3 4 5 6 7 8 9 10 |
svg.append("g") .selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d) { return xScale(d.name); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - padding - yScale(d.value); }) .attr("fill", "steelblue"); |
バーを表示します。 xScaleには、d3.scaleBand()で呼び出した関数が設定されていますが、mapした軸ラベル(d.name)を引数とすると各座標が呼び出せるようになっています。また、.bandwidth()で設定したpadding()を考慮した幅を取得します。”rect”は上から右下に向かって四角形を表示するので、”y”属性がバーの上側の座標となることにご注意ください。
まとめ
軸を表示するためにグラフの上下左右にマージンを設定することと、y座標が逆転するところが混乱する点です。一度テンプレートを作ってしまえば迷うことはないかと思います。