Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2017年1月6日金曜日

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

前回はd3.scale.linear(), d3.svg.line()を使用し、折れ線グラフの描画を行いました。
今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。



x軸, y軸

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

var x_axis = d3.svg.axis()
   .scale(x_scale)
   .orient("bottom");

var y_axis = d3.svg.axis()
   .scale(y_scale)
   .orient("left");
x軸、y軸の各スケールに折れ線を描画したスケールと同じ値を入れます。
orient関数では軸の方向を指示します。(外部リンク:リファレンス
svg.append("g")
   .classed("x_axis",true)
   .attr("transform", "translate(0," + h + ")")  *hは前回定義した描画領域の高さです。
   .call(xAxis);

svg.append("g")
   .classed("y_axis",true)
   .call(yAxis);
作成した軸情報を使用し、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>

描画のための位置情報のみが属性に与えられています。
色味などの情報は持っていないので,css等で与える必要があります。
.y_axis path,
.x_axis path{
  fill: none;
  stroke: #000;
}

※上記の実装を行い軸を追加した場合、svg領域の外側に数値が記載されるので、
ブラウザによってはsvgにoverflow: visible;を明示的に与える必要があります。

各頂点の値

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

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

以上までの処理を実行するとこのようになります。




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


  • d3.scale.linear()
  • d3.svg.line()
  • d3.svg.axis()

グラフを二本描く


基本的な部分は紹介したので、作ったグラフを少し発展させてみたいと思います。

メダルの総取得数の推移と金メダルの取得数の推移の二本の折れ線グラフを描画します。


1:描画領域の変更


高さ、幅の値を変えて横長の描画領域を作ります。
var w = 700;
var h = 400;

2:スケールの変更


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

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

3:x軸目盛りの変更

tickFormat関数を使い4年ごとに年数を表示させるようにします。(外部リンク:リファレンス
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickFormat(function(d){
  if((d - data[0].year)%4 == 0){
    return d + "年";
  }
  return "";
});

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

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

var line2 = d3.svg.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");

5:頂点の追加

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

g.selectAll(".t2").data(data).enter().append("text")
.attr({
  "x":line2.x(),
  "y":function(d,i){
    return line2.y()(d,i) - 10;
  }
}).text(function(d){ return d.gold; });
上記の変更を加えると、グラフが以下のようになります。



d3.svg.axis()に対して新たにtickFormat関数を使用しましたが、

他にもticks関数、tickSize関数などのグラフ作成を助ける機能もついています。

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

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

実際のサービスで確認!

オンラインデモではPV数、流入数を簡単なグラフに置き換え可視化しています。

0 件のコメント:

コメントを投稿