d3.js - d3.svg.axis でティックの最大量を定義するにはどうすればよいですか

Question

私のラベルd3.svg.axisが時々重なっているという問題があります。そのため、ティックとラベルの最大量を特定の量に減らしたいと思います。

API documentationで解決策が見つからないようです。

axis.tickValues()範囲が動的で、数時間から数年になる可能性があるため、使用できません。

使ってみaxis.ticks(9)ましたが効果はないようです。bl.ocks.org/3181719で例を見ることができます。

Answer 1

これらの 2 つのうちの 1 つがそれを行う必要があります。axis.ticks(10)目盛りの数を指定するかaxis.tickValues([1,2,4])、表示される実際の目盛りを指定するだけです。

日付を使用しているため、次のようにする必要があります。

 .ticks(d3.time.weeks, 2)

時間間隔の詳細については、https://github.com/mbostock/d3/wiki/Time-Intervalsを参照してください。表示されている時間の長さに基づいてティックを更新するために、 http://bl.ocks.org/1962173でこれを行う方法の例を見ることができます。

if ((maxExtent - minExtent) > 1468800000) {
    x1DateAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%a %d'))
    x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))        
}
else if ((maxExtent - minExtent) > 172800000) {
    x1DateAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%a %d'))
    x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))
}
else {
    x1DateAxis.ticks(d3.time.hours, 4).tickFormat(d3.time.format('%I %p'))
    x1MonthAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%b %e'))
}