D3.js tutorial - Partie 12 - Les axes

Introduction

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.

L'axe des ordonnées

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 :

Translater les axes

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 :

Des axes à gauche, droite et en haut

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

Part 11 Summary

Voir aussi

Dernière mise à jour : 29/01/2020