d3.jsの線グラフのx軸目盛りのレスポンシブについて


こんにちは

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

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

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




こちらのサンプルコードが参考になると思います。  
`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]

