Changer les ticks sur l'axe des x
J'essaie de comprendre d3.js. Lors de la définition de l'axe, comment obtenir un étiquetage personnalisé sur l'axe des x. Par exemple, l'étiquetage par défaut que j'obtiens est:
|------|------|------|------|------|------|
20 30 40 50 60 70 80
Alors que je veux quelque chose comme:
|------|------|------|------|------|------| ....
20 26 32 38 44 50 56
Je suis en train de l'apprendre et je travaille sur du code (légèrement modifié) à partir d'exemples officiels fournis:
var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");
Les graduations par défaut pour les échelles quantitatives sont des multiples de 2, 5 et 10. Vous semblez vouloir des multiples de 6; bien qu'inhabituel, cela pourrait avoir un sens selon la nature des données sous-jacentes. Ainsi, bien que vous puissiez utiliser axis.ticks pour augmenter ou diminuer le nombre de ticks, il retournera toujours des multiples de 2, 5 et 10 - pas 6.
Si vous voulez des multiples de 6, vous pouvez utiliser axis.tickValues pour spécifier explicitement les valeurs de graduation. Ceci est généralement utilisé en conjonction avec d3.range . Par exemple:
xAxis.tickValues(d3.range(20, 80, 4));
Si vous souhaitez calculer les valeurs dynamiquement, utilisez le domaine de l'échelle x pour récupérer la valeur la plus basse et la plus élevée. Gardez également à l'esprit que la limite supérieure de la plage est exclusive, donc dans l'exemple ci-dessus, la plus grande valeur de graduation est 76. Vous pouvez rendre la limite supérieure inclusive en augmentant légèrement la valeur d'arrêt de la plage (par exemple, 81).