Bus errorとSegmentation faultに困ったら見るブログ

物理の研究者による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)

【d3.js】でグラフにgridを追加する方法

かなり簡単に追加できる。
これのある、なしでグラフの見栄えがけっこう変わると思うので重要

私は、gnuplotでもいつもset gridの設定をいれてました .gnuplot

■ 参考
D3.jsの折れ線グラフにグリッド線を追加する

Line Chart with Grid [D3]

.tick line{
opacity: 0.2;
}

opacityは透明度の設定
これをCSSに書いておく

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);

最後の3業が大事

tickPaddingの引数は、軸と値表記の間の広さ
grid線の数をどうやって調整するのかわからない・・・・