Posted at

d3.jsで棒グラフを描く その2(スケール)

More than 1 year has passed since last update.


はじめに

d3.jsで棒グラフを描く その1の続きです。

前回作成したプログラムにスケールを適用します。

表示領域の高さが100として、100以上の値を持つ棒グラフを表示するとしたら、どうするでしょうか。全体が高さ100以内に収まるよう比率で値を求めますよね。スケールは、実際のデータを表示領域に合った値へ変換してくれる仕組みです。


スケール

スケールを宣言します。domainに変換前の値の最小値と最大値を設定し、rangeに変換後の値の最小値と最大値を設定します。

このスケールを使うと、5は50、10は100に変換してくれます。

// スケールの宣言

var H = 100;

var scale = d3.scale.linear()
.domain([0, 10])
.range([0, H]);


スケールの適用

高さを設定していたところを、先ほど宣言したscale関数に置き換えます。

svg.selectAll("rect")

.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// dがデータ、iが添え字
// 棒グラフのx開始点をずらす
// 棒グラフがくっつかないようにする
return i * (BAR_W + 1);
})
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
//return H - d[1] * 10;
return H - scale(d[1]);
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の1コ目を高さとする
// わかりにくいので、値を10倍
// return d[1] * 10;
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;
})
.attr("y", function(d) {
//return H - d[1] * 10 + 15;
return H - scale(d[1]) + 15;
})
.attr("font-size", "10px")
.attr("fill", "white");

ここまでを実行

見た目は変わりませんが、スケールを使って表示をしています。

高さを変えてみましょう。

//var H = 100;

var H = 200;

ここまでを実行

全体が崩れることなく、高さを変更できました。

次は、d3.jsで棒グラフを描く その3で、軸を追加します。