LoginSignup
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-20

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0