Edited at

d3.jsで棒グラフを描く その3(軸)

More than 1 year has passed since last update.


はじめに

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で、アニメーションを追加します。