Share
D3.js est une merveilleuse bibliothèque JavaScript utilisée pour créer des graphiques interactifs et attrayants.. D3.js signifie "Data Driven Documents" et utilise HTML, SVG et CSS pour exécuter sa magie. De la documentation officielle,
D3.js est une bibliothèque JavaScript pour manipuler des documents basés sur des données. D3 vous aide à donner vie aux données en utilisant HTML, SVG et CSS. L'accent mis par D3 sur les normes Web vous offre toutes les capacités des navigateurs modernes sans vous lier à un cadre propriétaire, combinant des composants de visualisation puissants et une approche de manipulation DOM basée sur les données..
Ce didacticiel sera un didacticiel d’introduction à D3.js, dans lequel nous nous concentrerons sur quelques éléments de base pour créer un graphique dynamique. Au cours de ce didacticiel, nous verrons comment créer un graphique multiligne à l'aide de la bibliothèque D3.js.
Si vous recherchez une solution rapide, il existe une sélection d'éléments graphiques JavaScript sur Envato Market..
À partir de quelques dollars seulement, c'est un excellent moyen d'implémenter quelque chose en quelques minutes qui prendrait beaucoup plus de temps à construire à partir de zéro.!
Vous pouvez trouver des scripts pour tout créer, des graphiques linéaires simples aux infographies complexes..
Éléments graphiques JavaScript sur le marché EnvatoPour commencer à utiliser D3.js, téléchargez et incluez D3.js ou connectez-vous directement à la dernière version de D3.js..
Nous allons commencer par créer les axes X et Y pour notre graphique. Nous allons utiliser des exemples de données pour tracer le graphique.
Voici le code HMTL basique de base index.html:
Pour commencer, nous aurons besoin de quelques exemples de données. Voici nos exemples de données:
var data = ["vente": "202", "année": "2000", "vente": "215", "année": "2001", "vente": "179", " année ":" 2002 ", " vente ":" 199 "," année ":" 2003 ", " vente ":" 134 "," année ":" 2003 ", " vente ":" 176 "," année ":" 2010 "];
Scalable Vector Graphics (SVG) est un format d'image basé sur XML permettant de dessiner des graphiques 2D prenant en charge l'interactivité et l'animation. Nous allons utiliser un svg élément pour dessiner notre graphique. Ajouter le svg élément dans index.html:
Ensuite, définissons des constantes comme largeur, la taille, marge de gauche, etc., que nous utiliserons lors de la création du graphique. D3 fournit une méthode appelée d3.sélectionner sélectionner un élément. Nous utiliserons d3.select pour sélectionner le svg élément de index.html.
Accentsconagua
var vis = d3.select ("# visualisation"), WIDTH = 1000, HEIGHT = 500, MARGES = en haut: 20, à droite: 20, en bas: 20, à gauche: 50,Sur la base des données, nous devons créer des échelles pour les axes X et Y. Nous aurons besoin des valeurs maximales et minimales des données disponibles pour créer les échelles sur les axes. D3 fournit une méthode API appelée d3.scale.linear que nous utiliserons pour créer des échelles pour les axes.
d3.scale.linear utilise deux propriétés appelées intervalle et domaine pour créer la balance. Intervalle définit la surface disponible pour le rendu du graphique, et Domaine définit les valeurs maximales et minimales que nous devons tracer dans l'espace disponible.
xScale = d3.scale.linear (). range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([2000,2010]),
Intervalle a été spécifié dans le code ci-dessus afin qu'il ne soit pas encombré sur les bords. Les valeurs maximales et minimales du domaine ont été définies en fonction des exemples de données utilisés.
De même, définissez le yScale comme montré:
yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([134,215]),
Ensuite, créons les axes en utilisant les échelles définies dans le code ci-dessus. D3 fournit une méthode API appelée d3.svg.axis pour créer des axes.
xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale);
Ensuite, ajoutez l’axe X créé à la svg conteneur comme indiqué:
vis.append ("svg: g") .call (xAxis); Enregistrez les modifications et essayez de parcourir index.html. Vous devriez avoir quelque chose comme:
Comme vous pouvez le constater, l’axe des X est dessiné mais il présente quelques problèmes. Premièrement, nous devons le positionner verticalement vers le bas. Lors de l'ajout de l'axe X au conteneur SVG, nous pouvons utiliser la propriété transform pour déplacer l'axe vers le bas. Nous allons utiliser traduire transformer pour déplacer l'axe en fonction des coordonnées. Comme nous devons déplacer l'axe X uniquement vers le bas, nous fournirons les coordonnées de transformation pour l'axe X sous la forme de 0 et l'axe Y juste au-dessus de la marge..
vis.append ("svg: g") .attr ("transformer", "traduire (0," + (HEIGHT - MARGINS.bottom) + ")") .call (xAxis);Ajoutons maintenant l’axe Y. Ajoutez le code suivant pour ajouter l'axe Y au conteneur SVG:
vis.append ("svg: g") .call (yAxis);Enregistrez les modifications et parcourez index.html et vous devriez avoir les deux axes comme indiqué.
Comme vous pouvez le voir sur la capture d'écran ci-dessus, le Axe Y n'est pas dans la bonne position. Nous devons donc changer le orientation de l'axe Y montré ci-dessus à gauche. Une fois que l'axe est aligné sur le côté gauche, nous appliquerons la transformation D3 pour le placer correctement le long de l'axe X. Ajouter le Orient propriété à la yAxis changer d'orientation.
yAxis = d3.svg.axis () .scale (yScale) .orient ("left");Appliquer D3 transformer en essayant d’ajouter le Axe Y vers le conteneur SVG:
vis.append ("svg: g") .attr ("transformer", "traduire (" + (MARGINS.left) + ", 0)") .call (yAxis);Nous avons conservé la coordonnée y de la traduction à 0, car nous voulions uniquement la déplacer horizontalement. Enregistrez les modifications et parcourez index.html. Vous devriez voir quelque chose comme:
Pour tracer les données de l'échantillon dans notre graphique, nous devons appliquer les xScale et le yScale aux coordonnées pour les transformer et pour tracer une ligne à travers l'espace de traçage. D3 fournit une méthode API appelée d3.svg.line () tracer une ligne. Alors ajoutez le code suivant:
var lineGen = d3.svg.line () .x (fonction (d) return xScale (d.année);) .y (fonction (d) return yScale (d.sale););
Comme vous pouvez le constater dans le code ci-dessus, nous avons spécifié les coordonnées x et y de la ligne, comme indiqué dans xScale et yScale défini plus tôt.
Ensuite, nous allons ajouter un chemin de ligne à svg et mappez les données de l'échantillon sur l'espace de traçage à l'aide du LineGen une fonction. Nous allons également spécifier quelques attributs pour la ligne tels que accident vasculaire cérébral Couleur, largeur du trait, etc., comme indiqué ci-dessous:
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'vert') .attr ('stroke-width', 2) .attr ('fill' , 'aucun');Enregistrez les modifications et parcourez index.html. Vous devriez avoir le graphe linéaire comme indiqué:
Par défaut, la ligne aura interpolation linéaire. Nous pouvons spécifier l’interpolation et ajouter des CSS aux axes pour une meilleure apparence..
var lineGen = d3.svg.line () .x (fonction (d) return xScale (d.année);) .y (fonction (d) return yScale (d.sale);) .interpolate (" base");Ajoutez le CSS suivant à index.html:
.chemin de l'axe remplissage: aucun; accident vasculaire cérébral: # 777; rendu de la forme: crispEdges; .axis text font-family: Lato; taille de police: 13px;
Inclure la classe à la fois xAxis et yAxis:
vis.append ("svg: g") .attr ("classe", "axe") .attr ("transformer", "traduire (0," + (HEIGHT - MARGINS.bottom) + ")") .call ( xAxis); vis.append ("svg: g") .attr ("classe", "axe") .attr ("transformation", "traduire (" + (MARGINS.left) + ", 0)") .call (yAxis) ;Avec base interpolation et quelques CSS, voici à quoi cela devrait ressembler:
Considérons un autre exemple de jeu de données, comme indiqué:
var data2 = ["vente": "152", "année": "2000", "vente": "189", "année": "2002", "vente": "179", " année ":" 2004 ", " vente ":" 199 "," année ":" 2006 ", " vente ":" 134 "," année ":" 2008 ", " vente ":" 176 "," année ":" 2010 "];
Par souci de simplicité, nous avons considéré deux ensembles de données d'échantillonnage différents avec le même Axe X valeurs. Afin de tracer ce qui précède data2 aux côtés de Les données, nous devons simplement ajouter un autre chemin svg à la svg élément. La seule différence est que les données transmises à l'échelle de la LineGen la fonction est data2. Voici à quoi cela devrait ressembler:
vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'aucun');Enregistrez les modifications et parcourez index.html. Vous devriez pouvoir voir le graphique multiligne comme indiqué:
Dans ce tutoriel, nous avons vu comment créer un graphique multiligne simple à l'aide de D3.js. Dans la prochaine partie de cette série, nous allons passer au niveau suivant dans ce didacticiel en rendant le graphique multiligne dynamique, et nous ajouterons également certaines fonctionnalités pour rendre le graphique plus interactif..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous!
