web-dev-qa-db-ja.com

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

_d3.svg.axis_のラベルが重複することがあるという問題があります。そのため、ティックとラベルの最大量を特定の量に減らしたいと思います。

APIドキュメント で解決策を見つけることができないようです。

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

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

d3.js
29
Pierre Spring

これらの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/196217 でこれを行う方法の例を示し、表示されている時間の長さに基づいてティックを更新します。

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'))
}
32
Bill