Para el tutorial de hoy vamos a empezar a diseñar y crear gráficos de barres usando D3.js, sigue leyendo para que sepas cómo hacerlo
Tout d'abord, qu'est-ce que D3.js?
D3.js es una biblioteca de JavaScript basada en datos para manipular elementos DOM.
“D3 te ayuda a dar vida a los datos mediante HTML, SVG y CSS. El énfasis de D3 en los estándares la toile le brinda todas las capacidades de los navigateurs modernos sin atarse a un marco propietario, combinando poderosos componentes de visualización y un enfoque basado en datos para la manipulación de DOM «. – d3js.org
Pourquoi devriez-vous créer des graphiques avec D3.js? Pourquoi ne pas simplement montrer une image?
Eh bien, les graphiques sont basés sur des informations provenant de ressources tierces qui nécessitent un affichage dynamique pendant le temps de traitement. De plus, SVG est un outil très puissant qui convient bien à ce cas d'application.
Prenons un détour pour voir quels avantages nous pouvons tirer de l'utilisation de SVG.
Les avantages du SVG
SVG significa gráficos vectoriales escalables, que técnicamente es un lenguaje de marcado basado en XML.
Il est couramment utilisé pour dessiner des graphiques vectoriels, spécifier des lignes et des formes ou modifier des images existantes.
Avantages:
- Compatible avec tous les principaux navigateurs
- A une interface DOM, ne nécessite pas de bibliothèque tierce
- Évolutif, peut maintenir une haute résolution
- Taille réduite par rapport aux autres formats d'image.
Les inconvénients:
- Il ne peut afficher que des images bidimensionnelles;
- Longue courbe d'apprentissage
- Le rendu peut prendre du temps avec des opérations intensives en calcul.
- Malgré ses inconvénients, SVG est un excellent outil pour afficher des icônes, des logos, des illustrations ou dans ce cas des graphiques.
À partir de D3.js
J'ai choisi le graphique à barres pour commencer car il représente un visuel de faible complexité tout en enseignant l'application de base D3.js elle-même. Cela ne devrait pas vous tromper, D3 fournit un excellent ensemble d'outils pour visualiser les données.
Un graphique à barres peut être horizontal ou vertical selon son orientation. J'irai avec le histogramme aka vertical.
En este diagrama, voy a mostrar los 10 lenguajes de programmation más populares según el resultado de la Encuesta de Desarrolladores 2018 de Stack Overflow .
Il est temps de dessiner!
SVG a un système de coordonnées qui commence à partir du coin supérieur gauche (0; 0). L'axe des x positif va vers la droite, tandis que l'axe des y positif va vers le bas. Par conséquent, la hauteur du SVG doit être prise en compte lors du calcul de la coordonnée y d'un élément.
Je veux créer un graphique de 1000 pixels de large et 600 pixels de haut.
<body>
<svg />
</body>
<script>
const margin = 60;
const width = 1000 - 2 * margin;
const height = 600 - 2 * margin;
const svg = d3.select('svg');
</script>
Dans l'extrait de code ci-dessus, je sélectionne l'élément créé dans le fichier HTML avec D3 select. Cette méthode de sélection accepte tous les types de chaînes de sélection et renvoie le premier élément correspondant. Utilisez selectAll si vous souhaitez les obtenir tous.
También defino un valor de margen que le da un poco de relleno adicional al gráfico. El relleno se puede aplicar con un elemento <g> traducido por el valor deseado. De ahora en adelante, recurro a este grupo para mantener una buena distancia de cualquier otro Contenu de la page.
const chart = svg.append ('g') .attr ('transform', `translate ($ {margin}, $ {margin})`);
Agregar atributos a un elemento es tan fácil como llamar al método attr. El primer parámetro del método toma un attribut que quiero aplicar al elemento DOM seleccionado. El segundo parámetro es el valor o una función de devolución de llamada que devuelve su valor. El código anterior simplemente mueve el inicio del gráfico a la posición (60; 60) del SVG.
Formats d'entrée D3.js pris en charge
Pour commencer à dessiner, je dois définir la source de données à partir de laquelle je travaille. Pour ce tutoriel, j'utilise un simple tableau JavaScript qui contient des objets avec le nom des langues et leurs pourcentages, mais il est important de mentionner que D3.js prend en charge divers formats de données.
La bibliothèque a des fonctionnalités intégrées pour charger à partir de XMLHttpRequest, de fichiers .csv, de fichiers texte, etc. Chacune de ces sources peut contenir des données que D3.js peut utiliser, la seule chose importante est de construire un tableau à partir de celle-ci. Notez qu'à partir de la version 5.0, la bibliothèque utilise des promesses au lieu de rappels pour charger les données, ce qui n'est pas une modification rétrocompatible.
Mise à l'échelle et axes
Continuons avec les axes du graphique. Pour dessiner l'axe y, Je dois définir la limite de valeur la plus basse et la plus élevée, qui dans ce cas sont 0 et 100.
Je travaille avec des pourcentages dans ce didacticiel, mais il existe des fonctions utilitaires pour les types de données autres que les nombres que j'expliquerai plus tard.
Je dois diviser la hauteur du graphique entre ces deux valeurs à parts égales. Pour cela, je crée quelque chose appelé une fonction de mise à l'échelle.
const yScale = d3.scaleLinear () .range ([hauteur, 0]) .domaine ([0, 100]);
La escala lineal es el tipo de escala más conocido. Convierte un domaine de entrada continuo en un rango de salida continuo. Observa el método rangey domain. El primero toma la longitud que debe dividirse entre los límites de los valores del dominio.
N'oubliez pas que le système de coordonnées SVG commence à partir du coin supérieur gauche, la plage prend donc la hauteur comme premier paramètre et non zéro.
Créer un axe gauche est aussi simple que d'ajouter un autre groupe et d'appeler la méthode axisLeft de D3 avec la fonction d'échelle comme paramètre.
chart.append ('g') .call (d3.axisLeft (yScale));
Maintenant, continuez avec l'axe des x.
const xScale = d3.scaleBand () .range ([0, width]) .domain (sample.map ((s) => s.language)) .padding (0.2) chart.append ('g') .attr ( 'transform', `translate (0, $ {hauteur})`) .call (d3.axisBottom (xScale)); d3-js-tutorial-bar-chart-labels
Notez que j'utilise scaleBand pour l'axe des x, ce qui aide à diviser la plage en bandes et à calculer les coordonnées et les largeurs des barres avec un rembourrage supplémentaire.
D3.js est également capable de gérer le type de date parmi beaucoup d'autres. scaleTime est vraiment similaire à scaleLinear, sauf que le domaine ici est un ensemble de dates.
Barres de dessin dans D3.js
Pensez au type d'entrée dont nous avons besoin pour dessiner les barres. Chacun représente une valeur illustrée par des formes simples, en particulier des rectangles. Dans l'extrait de code suivant, je les attache à l'élément de groupe créé.
chart.selectAll () .data (buts) .enter () .append ('rect') .attr ('x', (s) => xScale (s.language)) .attr ('y', (s) => yScale (s.value)) .attr ('height', (s) => height - yScale (s.value)) .attr ('width', xScale.bandwidth ())
Tout d'abord, vous utilisez selectAll pour sélectionner les éléments dans le graphique qui retourne avec un jeu de résultats vide. Ensuite, la fonction de données qui indique le nombre d'éléments que le DOM doit être mis à jour en fonction de la longueur du tableau. enter identifie les éléments manquants si l'entrée de données est plus longue que la sélection. Cela renvoie une nouvelle sélection représentant les éléments à ajouter. Habituellement, cela est suivi d'un élément append qui ajoute des éléments au DOM.
Fondamentalement, je dis à D3.js d'ajouter un rectangle pour chaque membre du tableau.
Maintenant, cela ajoute simplement des rectangles les uns sur les autres qui n'ont ni hauteur ni largeur. Ces deux attributs doivent être calculés et c'est là que les fonctions de mise à l'échelle sont à nouveau utiles.
Regardez, j'ajoute les coordonnées des rectangles avec l'attr appelé. Le deuxième paramètre peut être un rappel qui prend 3 paramètres: le membre réel des données d'entrée, son index et l'entrée entière.
.attr ('x', (réel, index, tableau) => xScale (valeur.actuelle))
La fonction d'échelle renvoie les coordonnées d'une valeur de domaine donnée. Le calcul des coordonnées est un jeu d'enfant, l'astuce est avec la hauteur de la barre. La coordonnée y calculée doit être soustraite de la hauteur du graphique pour obtenir la représentation correcte de la valeur sous forme de colonne.
Je définis la largeur des rectangles avec la fonction de mise à l'échelle. ScaleBand a également une fonction de bande passante qui renvoie la largeur calculée pour un élément en fonction du jeu de remplissage.
d3-js-tutorial-bar-chart-drawn-out-with-javascript
Beau travail, mais pas si sophistiqué, non?
Pour éviter que notre public ne s'ennuie, ajoutons des informations et améliorons les images pour rendre votre graphique beaucoup plus beau!
