【D3.js講座】D3.jsで折れ線グラフを描画する（後編）

前回はd3.scaleLinear(), d3.line()を使用し、折れ線グラフの描画を行いました。

今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。

x軸, y軸

前回作成したx_scale, y_scaleを利用し、x軸、y軸を作成します。
軸の作成はd3.axisBottom()関数やd3.axisLeft()関数により簡単に作成できます。

var x_axis = d3.axisBottom(x_scale);
var y_axis = d3.axisLeft(y_scale);

x軸、y軸の各スケールに折れ線を描画したスケールと同じ値を入れます。
orient関数では軸の方向を指示します。（外部リンク：リファレンス）

svg.append("g")
  .attr("transform", "translate(0," + h + ")")
  .call(x_axis);

svg.append("g")
  .call(y_axis);

作成した軸情報を使用し、svg要素にappendします。
なお、x軸をグラフの下部に表示するためtransform関数を使用しています。

以上の処理を実行した場合では以下のような要素が自動で作成されます。

<g class="tick" style="opacity: 1;" transform="translate(0,0)">
　　<line x2="0" y2="6"></line>
　　<text dy=".71em" style="text-anchor: middle;" x="0" y="9">1,996</text>
</g>

描画のための位置情報のみが属性に与えられています。

また、上記の実装で軸を追加すると、svg領域の外側にxy軸の数値が記載されるので、svg要素にマージンとoverflow: visibleを明示的に与えます。

svg {
  overflow: visible;
  margin: 30px;
}

各頂点の値

前回頂点に円を置いたのと同じように各値を表示します。
ただし、頂点と重ならないように、少しずらして配置します。

g.selectAll(".t").data(data).enter().append("text")
  .attr("x", line.x())
  .attr("y", function(d,i){ return line.y()(d,i) - 15;})
  .text(function(d){ return d.all; });

すると次のようなグラフが表示されます。

スケールの取り方、グラフの書き方、軸の配置の基本的な実装を説明しました。
以下の4つの関数を利用すればグラフの作成が比較的簡単に行えることが分かったかと思います。

• d3.scaleLinear()
• d3.line()
• d3.axisBottom()
• d3.axisLeft()

グラフを二本描く

基本的な部分は紹介したので、作ったグラフを少し発展させてみたいと思います。
メダルの総取得数の推移と金メダルの取得数の推移の二本の折れ線グラフを描画します。

描画領域の変更

高さ、幅の値を変えて横長の描画領域を作ります。

var w = 700;
var h = 400;

スケールの変更

y軸スケールの上限下限を変更します。

var y_scale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d){ return d.all; }) + 5])
  .range([h,0]);

x軸目盛りの変更

tickFormat関数を使い４年ごとに年数を表示させるようにします。（外部リンク：リファレンス）

var x_axis = d3.axisBottom(x_scale)
  .tickFormat(function(d){
    if ((d - data[0].year)%4 == 0) {
      return d + "年";
  }
  return "";
});

金メダル取得数グラフの追加

新たにpath要素を追加する処理を付け足します。

var line2 = d3.line()
  .x(function(d,i) { return x_scale(d.year); })
  .y(function(d,i) { return y_scale(d.gold); });

g.append("path")
  .datum(data)
  .attr("d", line2)
  .attr("stroke","#00f")
  .attr("fill","none")
  .attr("stroke-width","3px");

頂点の追加

g.selectAll(".c2").data(data).enter().append("circle")
  .attr("cx", line2.x())
  .attr("cy", line2.y())
  .attr("r", 5)
  .attr("fill", "#000");

g.selectAll(".t2").data(data).enter().append("text")
  .attr("x", line2.x())
  .attr("y", function(d,i) {
    return line2.y()(d,i) - 10;
  })
  .text(function(d){ return d.gold; });

上記の変更を加えると、グラフが以下のようになります。

d3.axisBottom()に対して新たにtickFormat関数を使用しましたが、他にもticks関数、tickSize関数などのグラフ作成を助ける機能もついています。

これらを使用すればグラフの作成がより簡単になるので、是非お試しください。

次回はd3を使ったソート機能をご紹介します。

実際のサービスで確認！

アクセス解析＆SEO分析ツール「アナトミー」ではPV数、流入数を簡単なグラフに置き換え可視化しています。

D3.js講座

• 【D3.js講座】D3.jsとは？
• 【D3.js講座】D3.jsを使用した図形の描画
• 【D3.js講座】D3.jsで折れ線グラフを描画する（前編）
• 【D3.js講座】D3.jsで折れ線グラフを描画する（後編）