Como posso definir uma quantidade máxima de ticks em um d3.svg.axis

Question

Eu tenho o problema de que os rótulos do meu d3.svg.axis às vezes se sobrepõem.Portanto, gostaria de reduzir a quantidade máxima de ticks e rótulos para um determinado valor.

Não consigo encontrar uma solução no Documentação da API.

eu não posso usar axis.tickValues() porque o intervalo é dinâmico e pode ir de várias horas a vários anos.

Eu tentei usar axis.ticks(9) mas não parece ter efeito.Você pode ver um exemplo em bl.ocks.org/3181719.

Answer 1

Um desses dois deve fazer isso por você.Basta especificar axis.ticks(10) para especificar o número de marcas de escala ou axis.tickValues([1,2,4]) para especificar as marcas de escala reais que devem aparecer.

Como você está usando datas, você precisará fazer algo assim:

 .ticks(d3.time.weeks, 2)

Você pode ler mais sobre intervalos de tempo em https://github.com/mbostock/d3/wiki/Time-Intervals.Você pode ver um exemplo de como faço isso em http://bl.ocks.org/1962173 para atualizar os ticks com base no período de tempo mostrado.

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