d3.js

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