はじめに
d3.jsで棒グラフを描く その2(スケール)の続きです。
前回作成したプログラムに軸を追加します。
縦軸の追加
軸の追加はaxisを使います。先ほどと同じスケールを利用して、axisを生成します。orientは値を表示する場所、ticksは表示する値の数の設定となります。axisをsvgへ追加すると、軸が表示されます。
// y軸の追加
var axis = d3.svg.axis()
.scale(scale)
.orient("left")
.ticks(3);
svg.append("g")
.call(axis);
ここまでを実行
何も変わりません。追加した軸は、一番左の棒グラフの左に表示にされるため、見切れてしまっています。
軸が見えるように、全体を右へずらします。
変数W_PADDINGを宣言して、軸の位置と値の表示位置をずらします。
var W_PADDING = 25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// dがデータ、iが添え字
// 棒グラフのx開始点をずらす
// 棒グラフがくっつかないようにする
//return i * (BAR_W + 1);
return i * (BAR_W + 1) + W_PADDING;
})
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
return H - scale(d[1]);
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の1コ目を高さとする
return scale(d[1]);
})
// グラフの色設定
.attr("style", "fill:turquoise");
// テキストの追加
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[1];
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
//return i * (BAR_W + 1) + 10;
return i * (BAR_W + 1) + 10 + W_PADDING;
})
.attr("y", function(d) {
return H - scale(d[1]) + 15;
})
.attr("font-size", "10px")
.attr("fill", "white");
// y軸の追加
var axis = d3.svg.axis()
.scale(scale)
.orient("left")
.ticks(3);
svg.append("g")
.attr("transform", "translate(" + W_PADDING + ", 0)")
.call(axis);
ここまでを実行
まだ、上下の見切れがあります。
上下の見切れは、svgの高さを大きくして対応します。変数H_PADDINGを宣言して、棒グラフと値と軸の縦描画位置もそれぞれずらします。
var H_PADDING = 10;
var svg = d3.select("body")
.append("svg")
.attr("width", W)
// 上下にH_PADDING分のスペース
// .attr("height", H);
.attr("height", H + H_PADDING * 2);
// スケール
var scale = d3.scale.linear()
.domain([0, 10])
.range([0, H]);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// dがデータ、iが添え字
// 棒グラフのx開始点をずらす
// 棒グラフがくっつかないようにする
//return i * (BAR_W + 1);
return i * (BAR_W + 1) + W_PADDING;
})
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
// 開始位置をH_PADDING分ずらす
// return H - scale(d[1]);
return H - scale(d[1]) + H_PADDING;
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の1コ目を高さとする
return scale(d[1]);
})
// グラフの色設定
.attr("style", "fill:turquoise");
// テキストの追加
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[1];
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
//return i * (BAR_W + 1) + 10;
return i * (BAR_W + 1) + 10 + W_PADDING;
})
.attr("y", function(d) {
// 開始位置をH_PADDING分ずらす
// return H - scale(d[1]) + 15;
return H - scale(d[1]) + 15 + H_PADDING;
})
.attr("font-size", "10px")
.attr("fill", "white");
// y軸の追加
var axis = d3.svg.axis()
.scale(scale)
.orient("left")
.ticks(3);
svg.append("g")
// 開始位置をH_PADDING分ずらす
// .attr("transform", "translate(" + W_PADDING + ", 0)")
.attr("transform", "translate(" + W_PADDING + "," + H_PADDING + ")")
.attr("class", "axis")
.call(axis);
スタイルシートを設定して、見栄えをよくします。
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
ここまでを実行
軸の値が下が10で、上が0となってしまっています。
これは、上下が反対になるスケールから、軸を作成するようにします。
// y軸の追加
var yScale = d3.scale.linear()
.domain([0, 10])
.range([H, 0]);
var axis = d3.svg.axis()
// .scale(scale)
.scale(yScale)
.orient("left")
.ticks(3);
ここまでを実行
これで縦軸ができました。
横軸の追加
横軸はrectで横線を引いて、棒グラフの下にテキストでタイトルを表示します。タイトルが縦書きになるようスタイルシートを設定し、タイトルが表示されるようsvgの縦幅をさらに大きくします。
.x_text {
writing-mode: tb-rl;
font-size: 10px;
}
var svg = d3.select("body")
.append("svg")
.attr("width", W)
// .attr("height", H);
// .attr("height", H + H_PADDING * 2);
// svg領域大きく
.attr("height", H + H_PADDING * 2 + 200);
// x軸の追加
// 線をひく
svg.append("rect")
.attr("width", W - W_PADDING)
.attr("height", 1)
.attr("x", W_PADDING)
.attr("y", H + H_PADDING);
// テキスト
svg.selectAll(".x_text")
.data(dataset)
.enter()
.append("text")
.attr("class", "x_text")
.attr("x", function(d, i) {
return i * (BAR_W + BAR_PADDING) + 10 + W_PADDING;
})
.attr("y", H + H_PADDING + 3)
.text(function(d, i) {
return d[0];
});
ここまでを実行
これで、見た目は完成です。
次は、d3.jsで棒グラフを描く その4で、アニメーションを追加します。