d3.jsで棒グラフを描く その２（スケール）

はじめに

d3.jsで棒グラフを描く　その１の続きです。
前回作成したプログラムにスケールを適用します。
表示領域の高さが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) {
      // データ配列の１コ目を高さとする
      // わかりにくいので、値を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で棒グラフを描く　その３で、軸を追加します。