

こんにちは

現在d3.jsで線グラフを作っているのですが  
線グラフをスマートフォン表示させたときに日付のx軸のラベルが重なってしまいます。

目盛りの数をticks()で指定してもd3に強制的に目盛りの数を変えられてしまうので  
いい方法がまったく浮かびません。

SVGのサイズにあわせて目盛りの数を減らしたり増やしたりしたいのですが  
どのようにすればよいでしょうか。


CC BY-SA 3.0
2015-12-17T09:56:38.087
20111
2016-09-25T15:24:45.353
13598
question
javascript d3.js
d3.jsの線グラフのx軸目盛りのレスポンシブについて


こちらのサンプルコードが参考になると思います。  
`tickValues`メソッドでフィルターを使い、`return`で条件により`true`を返せば増減させることができます。

[Ordinal Tick Filtering](http://bl.ocks.org/mbostock/3212294)

[code]

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickValues(x.domain().filter(function(d, i) { return !(i % 2); }))
        .orient("bottom");
    
[/code]


CC BY-SA 3.0
2015-12-17T10:49:02.157
20113
2015-12-17T10:49:02.157
9566
20111
answer