web-dev-qa-db-fra.com

Comment puis-je définir une quantité maximale de ticks dans un d3.svg.axis

J'ai le problème que les étiquettes de mon d3.svg.axis Se chevauchent parfois. C'est pourquoi je voudrais réduire la quantité maximale de tiques et d'étiquettes à une certaine quantité.

Je n'arrive pas à trouver de solution dans la documentation API .

Je ne peux pas utiliser axis.tickValues() car la plage est dynamique et peut aller de plusieurs heures à plusieurs années.

J'ai essayé d'utiliser axis.ticks(9) mais cela ne semble pas avoir d'effet. Vous pouvez regarder un exemple sur bl.ocks.org/3181719 .

d3.js
29
Pierre Spring

L'un de ces deux devrait le faire pour vous. Spécifiez simplement axis.ticks(10) pour spécifier le nombre de graduations ou axis.tickValues([1,2,4]) pour spécifier les graduations réelles qui doivent apparaître.

Puisque vous utilisez des dates, vous devrez faire quelque chose comme ceci:

 .ticks(d3.time.weeks, 2)

Vous pouvez en savoir plus sur les intervalles de temps sur https://github.com/mbostock/d3/wiki/Time-Intervals . Vous pouvez voir un exemple sur la façon dont je fais cela à http://bl.ocks.org/196217 pour mettre à jour les ticks en fonction de la durée affichée.

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