Как определить максимальное количество тиков в d3.svg.axis

У меня проблема с тем, что метки моего d3.svg.axis иногда перекрываются. Поэтому я хотел бы уменьшить максимальное количество тиков и меток до определенной суммы.

Я не могу использовать axis.tickValues(), потому что диапазон динамический и может идти от нескольких часов до нескольких лет.

Я пробовал использовать axis.ticks(9), но, похоже, это не влияет. Вы можете посмотреть пример на bl.ocks.org/3181719.

Ответы

Ответ 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'))
}