d3.jsでチャートを作る ラインチャートとバーチャートを２つのy軸上に描画する

d3.js周りを調査して、簡易なチャートをいくつか作ったので後々のためにまとめておく。今回は２つのy軸上にラインチャートとバーチャートをプロットする。

他のチャートはこちら
d3.jsでチャートを作る　ツールチップ
d3.jsでチャートを作る　パイチャート



JSFiddleに動作するサンプルをあげてあるので詳細はそちらを参考にしてもらいたいが、簡単に解説しておく。なおd3.jsはdata, enterの仕組みが理解できていないと一見しても意味不明なコードになるのでチュートリアル的なものをどこかで一読されることをお勧めする。

JSFiddleはこちら

データを用意する。

var data = [
      { name:'Branch A', sales: 5400, forecast: 7000 },
      { name:'Branch B', sales: 2800, forecast: 4500 },
      { name:'Branch C', sales: 3600, forecast: 3300 },
      { name:'Branch D', sales: 1700, forecast: 4700 },
      { name:'Branch E', sales: 2200, forecast: 5500 }
  ];

svg要素を用意する。

var margin = { top: 50, right: 100, bottom: 40, left: 40 }
      , width = 800 - margin.left - margin.right
      , height = 300 - margin.top - margin.bottom
      , svg = d3.select('#item-container').append('div').append('svg')
                  .attr('width', width + margin.left + margin.right)
                  .attr('height', height + margin.top + margin.bottom)
                  .append('g')
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

X軸。ここでscaleにはordinal()を使用している。他に線形のlinear()と時系列用のtime()が使用できる。

// x軸は文字列なのでordinalにするのとrangeRoundPointsでちょうど良い場所を取得する
  var x = d3.scale.ordinal()
              .domain(data.map(function (d) { return d.name; }))
              .rangeRoundPoints([0, width], 0.5);
  var xAxis = d3.svg.axis().scale(x)
                  .orient('bottom');
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + height + ')')
      .call(xAxis);

   // x軸のTickの文字を斜めにする
   svg.selectAll(".x text")
        .attr("transform", function (d) {
            return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";
        });

一つ目のY軸。domain()に0から売り上げと予想の最大値を指定している。またnice()でよさげにtickを調整してもらう。range()がheightから0になっているのはSVGの(0, 0)は左上をさすため。

// 一つ目のy軸。売り上げと予想から最大値を取得する
  var y = d3.scale.linear().nice()
              .domain([0, d3.max(data, function (d) { return Math.max(d.sales, d.forecast); })])
              .range([height, 0]);
  var yAxis = d3.svg.axis().scale(y)
              .orient('left')
              .ticks(5);
  var gy = svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis);
  // テキストを表示する
  gy.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', 16)
      .style('text-anchor', 'end')
      .text('万円');

二つ目のY軸。右端にtransform.translateで移動する。また横線を引くためにd3が追加してくれたtickのg要素があるのでそこに横線用のline要素を追加して描画している。

// 二つ目のy軸。売り上げと予想の割合を表示する
  var y2 = d3.scale.linear().nice()
              .domain([0, 150])
              .range([height, 0]);
  var yAxis2 = d3.svg.axis().scale(y2)
              .orient('right');
  var gy2 = svg.append('g')
      .attr('transform', 'translate(' + width + ',0)')
      .attr('class', 'y2 axis')
      .call(yAxis2);
  // 横線を描画する
  gy2.selectAll('g').filter(function(d) { return d; })
      .append('line')
      .attr('x1', -width)
      .attr('x2', 0)
      .classed('minor', true);
  // テキストを表示する
  gy2.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', -10)
      .style('text-anchor', 'end')
      .text('%');

ラインチャート。二つ目のY軸で高さを算出している。

// ラインチャート。売り上げと予想の割合を表示する
  var linePlaceHolder = svg.append('g');
  var percentLine = d3.svg.line()
              .x(function (d) { return x(d.name); })
              .y(function (d) { return y2((d.sales / d.forecast) * 100); });
  linePlaceHolder.append("path")
                  .datum(data)
                  .attr("class", "line percent")
                  .attr("d", percentLine);

バーチャート。一つ目のY軸で高さを算出している。またX軸のscaleでrangeRoundPoints()を指定しているおかげでちょうど良い感じの座標が取得できている。ここらへんは色々いじってためしてもらいたい。

// バーチャート。売り上げと予想を表示する
  // bars
  var bar = svg.selectAll('.bar')
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'bar')
      .attr('transform', function(d) { return 'translate(' + (x.rangeBand() / 2 + x(d.name)) + ',0)'; });

  // 売り上げ
  bar.append('rect')
      .attr('class', 'sales')
      .attr('x', -10)
      .attr('y', function (d) { return y(d.sales); })
      .attr('height', function (d) { return height - y(d.sales); })
      .attr('width', 10);

  // 予想
  bar.append('rect')
      .attr('class', 'forecast')
      .attr('y', function (d) { return y(d.forecast); })
      .attr('height', function (d) { return height - y(d.forecast); })
      .attr('width', 10);