こんにちは
現在d3.jsで線グラフを作っているのですが
線グラフをスマートフォン表示させたときに日付のx軸のラベルが重なってしまいます。
目盛りの数をticks()で指定してもd3に強制的に目盛りの数を変えられてしまうので
いい方法がまったく浮かびません。
SVGのサイズにあわせて目盛りの数を減らしたり増やしたりしたいのですが
どのようにすればよいでしょうか。
こちらのサンプルコードが参考になると思います。
tickValues
メソッドでフィルターを使い、return
で条件によりtrue
を返せば増減させることができます。
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(x.domain().filter(function(d, i) { return !(i % 2); }))
.orient("bottom");