D3.js fournit des instructions pour créer des axes dans les graphiques. Avant de créer un axe,
vous devez comprendre comment fonctionne la fonction scale()
puisque cette dernière est utilisée
pour mettre à l'échelle les axes. Si vous n'êtes pas familié avec cette fonction , lisez
la partie 10 de ce tutoriel avant cette page.
Pour créer l'axe des ordonnées (en bas du graphique), vous devez d'abord créer une fonction de mise à l'échelle. Dans cet exemple, nous allons créer un axe allant de 0 à 10. Notre conteneur SVG a une largeur de 200 pixels. Nous allons laisser une marge de 20 pixcels à droite et à gauche de notre axe. Notre fonction de mise à l'échelle devient :
var xScale = d3.scaleLinear()
.domain([0, 20])
.range([10, 180]);
La syntaxe suivante permet de créer l'axe :
svg.append('g').call(d3.axisBottom(xScale));
La fonction call()
est utilisée pour invoquer la fonction d3.axisBottom()
une et une seule fois
en passant la sélection avec tous les arguments optionnels. Une explicaiton
plus détaillée est disponible ici.
Voici les axes dessinés dans notre conteneur SVG :
Bien sûr, nous voulons généralement place l'axe des ordonnées en bas du graphique. Il est donc nécessaire de translater l'axe :
svg.append('g')
.attr('transform', 'translate(0, 80)')
.call(d3.axisBottom(xScale));
Notre axe est maintenant placé en bas du graphique :
L'affichage des autres axes fonctionne exactement de la même façon :
Notez ici l'utilisation de la fonction ticks()
pour spécifier le nombre de valeurs
affichées sur les axes droite et gauche :
// Right axis
svg.append('g')
.attr('transform', 'translate(380, 0)')
.call(d3.axisRight(yScale).ticks(5))