グリッド線を付ける

コードは以下のリンクからどうぞ。

グリッド線の付いた折れ線グラフ

変更するのは軸の設定です。通常、軸の設定は以下のようにすると思います。

// 上でスケールの設定がしてあって...
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

これはx軸の設定ですが、ここに色々と追加していきます。

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .innerTickSize(-height)  // 目盛線の長さ(内側)
    .outerTickSize(0) // 目盛線の長さ(外側)
    .tickPadding(10); // 目盛線とテキストの間の長さ

3つほど命令が追加されました。グリッド線は目盛線をいじることで実現しています。まず、命令に出てきたinnerTickやouterTickは、それぞれ図のような場所を表しています。

pic20140419-1

innerTickは初期状態で正の方向に飛び出しているので、高さの分だけマイナス方向に飛ばしてしまいます。outerTickはグリッド線では必要ないので消してしまいます。最後にTickとテキストとの間が詰まり過ぎないよう、tickPaddingで余白を与えてあげれば完成です。

ただ、そのままだとグリッド線が濃すぎるので、CSSでopacityを設定して薄くしてあげます。

.tick line{
  opacity: 0.2;
}

これで綺麗なグリッド線ができました!

pic20140419-2

まとめ

この方法は折れ線グラフに限らず使えるので、「ちょっとグラフが物足りない…」と感じた時に使ってみてはどうでしょうか。

CATEGORIES