D3.js tutoriel - Partie 10 - Définir l'échelle avec scale()

D3.js fournit des fonctions utiles pour la mise à l'échelle des graphiques. Il existe de nombreuses possibilités, mais ici, nous allons commencer par la technique la plus élémentaire. Le concept de base est de définir l'échelle en utilisant deux intervalles. Par exemple [0 10] => [0 300]:

Mise à l'échelle sur l'axe X

Créons une fonction qui convertie les indexes de notre jeu de données vers des coordonnées graphiques :

var xScale = d3.scaleLinear()
            .domain([0, dataset.length])
            .range([0, width]);

scaleLinear() spécifie que la conversion sera linéaire domain([0, dataset.length]) est utilisé pour définir le domaine initial (ou d'entrée), ici, de zéro à al longueur de notre jeu de données range([0, width]) spécifie l'intervalle cible (de sortie), i.e. la largeur de notre graphique

xScale() est une fonction qui peut être appelée pour mettre à l'échelles les coordonnées en abscice de notre diagramme :

bars.selectAll('rect')
    .data(dataset)
    .enter()    
    .append('rect')
    .attr('x', (d,i) => xScale(i) )
    .attr('y', (d) => height-d)
    .attr('width', xScale(0.9))
    .attr('height', (d) => d);

Le diagramme est étendu à la largeur de notre conteneur :

Mise à l'échelle sur l'axe Y

Bien sûr, nous pourrions faire de même ici pour redimensionner la hauteur de chaque barre. Mais nous utiliserons une solution légèrement différente. Nous adapterons la hauteur de nos barres à la hauteur du graphique. In other words, the highest bar sera redimenssionée de façon à occuper toute la hauteur du diagramme: Voici le code source pour créer la fonction yScale :

var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([0, height]);

La fonction d3.max(tableu) retourne la valeur du plus grand élément du tableau. Nous pouvons maintenant mettre à l'échelle tous les éléments verticaux :

bars.selectAll('rect')
    .data(dataset)
    .enter()    
    .append('rect')
    .attr('x', (d,i) => xScale(i) )
    .attr('y', (d) => height-yScale(d))
    .attr('width', xScale(0.9))
    .attr('height', (d) => yScale(d));

Le diagramme a été redimenssioné de façon à ce que la plus grande barre soit de la même hauteur que notre conteneur SVG

Voir aussi


Dernière mise à jour : 06/10/2022