Share
Dans la partie précédente de cette série, nous avons vu comment commencer à créer un graphique multiligne à l'aide de la bibliothèque JavaScript D3.js. Dans ce didacticiel, nous allons passer au niveau suivant en faisant en sorte que le graphique multiligne réponde de manière dynamique aux données, et nous ajouterons quelques fonctionnalités supplémentaires au fur et à mesure de l'avancement du didacticiel..
Commençons par cloner la première partie du didacticiel de GitHub.
clone de git https://github.com/jay3dec/MultiLineChart_D3.git
Aller vers MultiLineChart_D3 et parcourir index.html, et vous devriez avoir un graphique multiligne basé sur les données de l'échantillon.
Dans le tutoriel précédent, lorsque nous avons créé xScale et yScale en utilisant Intervalle et Domaine, nous avons codé en dur le minimum et le maximum pour le domaine. Pour rendre notre graphique plus flexible, nous devons lire les valeurs minimale et maximale du domaine de manière dynamique à partir de la source de données..
D3.js fournit le d3.min et d3.max méthodes pour obtenir les valeurs minimales et maximales d'un tableau, respectivement. Nous utiliserons ces fonctions pour obtenir les valeurs minimales et maximales du domaine..
Nous pouvons obtenir la valeur minimale d'un tableau comme indiqué:
d3.min (données, fonction (d) return d.value;)
De même, pour obtenir la valeur maximale:
d3.max (data, function (d) return d.value;)
Remplacez simplement les valeurs minimum et maximum dans la xScale domaine comme indiqué:
xScale = d3.scale.linear (). range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([d3.min (données, fonction (d) return d.year;), d3.max (données, fonction (d) return d.year;)]),
De même, remplacez le yScale domaine:
yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([d3.min (données, fonction (d) return d.sale;), d3.max (données, fonction (d) return d.sale;)]),
Enregistrez toutes les modifications et naviguez index.html. Maintenant, vous devriez avoir le graphique fonctionne bien, comme il était plus tôt. La seule différence est qu'il capte les valeurs maximales et minimales du domaine de manière dynamique..
Conserver un seul objet JSON pour l'échantillon faciliterait l'analyse des données et leur tracé sur le graphique. Combinez donc les deux exemples de données en une seule chaîne de données JSON, comme indiqué ci-dessous:
var data = ["Client": "ABC", "vente": "202", "année": "2000", "Client": "ABC", "vente": "215", "année" : "2002", "Client": "ABC", "Vente": "179", "Année": "2004", "Client": "ABC", "Vente": "199", " year ":" 2006 ", " Client ":" ABC "," Vente ":" 134 "," Année ":" 2008 ", " Client ":" ABC "," Vente ":" 176 " , "année": "2010", "Client": "XYZ", "vente": "100", "année": "2000", "Client": "XYZ", "vente": " 215 "," année ":" 2002 ", " client ":" XYZ "," vente ":" 179 "," année ":" 2004 ", " client ":" XYZ "," vente " : "199", "année": "2006", "Client": "XYZ", "vente": "134", "année": "2008", "Client": "XYZ", " vente ":" 176 "," année ":" 2013 "];
Nous allons maintenant modifier notre code pour que notre graphique soit redimensionné de manière dynamique en fonction du jeu de données exemple et de ses valeurs..
Ensuite, nous allons diviser et organiser les données sur la base Client afin que nous puissions dessiner un graphique linéaire pour chaque Client dans les données. D3 fournit une méthode appelée d3.nest qui aide à organiser les données basées sur un particulier clé champ. Nous allons utiliser d3.nest pour trier les données sur la base Client comme montré:
var dataGroup = d3.nest () .key (fonction (d) return d.Client;) .entries (data);
Voici comment dataGroup voudrais regarder:
["clé": "ABC", "valeurs": ["Client": "ABC", "vente": "202", "année": "2000", "Client": "ABC", "vente": "215", "année": "2002", "client": "ABC", "vente": "179", "année": "2004", "client": "ABC "," vente ":" 199 "," année ":" 2006 ", " Client ":" ABC "," vente ":" 134 "," année ":" 2008 ", " Client ": "ABC", "vente": "176", "année": "2010"], "clé": "XYZ", "valeurs": ["Client": "XYZ", "vente": "100", "année": "2000", "Client": "XYZ", "vente": "215", "année": "2002", "Client": "XYZ", "vente ":" 179 "," année ":" 2004 ", " Client ":" XYZ "," vente ":" 199 "," année ":" 2006 ", " Client ":" XYZ ", "vente": "134", "année": "2008", "client": "XYZ", "vente": "176", "année": "2013"]]]]
Ensuite, retirez le svg code de chemin de ligne pour la création de ligne que nous avons précédemment codé en dur.
Accentsconagua
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'vert') .attr ('stroke-width', 2) .attr ('fill' , 'aucun'); vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'aucun');Au lieu de cela, nous allons parcourir le dataGroup et créer un graphique linéaire pour chaque Client comme montré:
dataGroup.forEach (function (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', 'blue') .attr (' largeur de trait ', 2) .attr (' remplissage ',' aucun '););Enregistrez les modifications et essayez de parcourir index.html. Vous devriez pouvoir voir le graphique multiligne comme indiqué:
Ajoutons également des couleurs aléatoires aux lignes du graphique. Pour ajouter des couleurs aléatoires, nous utiliserons la méthode d3.hsl. Modifier le accident vasculaire cérébral attribut du graphe linéaire comme indiqué ci-dessous pour obtenir des couleurs aléatoires pour les lignes.
dataGroup.forEach (function (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', fonction (d, j) return "hsl (" + Math.random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('fill', 'none');) ;Enregistrez les modifications et parcourez index.html. Vous devriez voir des couleurs aléatoires pour les lignes sur le graphique.
Ensuite, nous ajouterons légendes pour le Les clients dans les données de l'échantillon. Une fois les légendes ajoutées, nous attacherons un événement de clic sur les légendes qui permuterait l'affichage des graphiques linéaires respectifs..
Tout d'abord, afin d'ajouter la légende, nous devons modifier le fond de la marge et dessus de la marge à 50 pour accueillir les légendes.
var vis = d3.select ("# visualisation"), WIDTH = 1000, HEIGHT = 500, MARGES = en haut: 50, à droite: 20, en bas: 50, à gauche: 50,En itérant le dataGroup, nous ajouterons les légendes pour les graphiques linéaires correspondants. Ajouter des légendes est assez simple. Tout d’abord, définissez l’espace de la légende en fonction du nombre de clients ou de graphiques linéaires que nous allons dessiner:
lSpace = WIDTH / dataGroup.length;
Ajouter un texte à l’élément svg avec les coordonnées x et y tout en itérant le dataGroup après la création de la ligne comme indiqué:
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "noir") .text (d. clé);Nous avons ajusté l'espacement de la légende (lSpace) En fonction du nombre de légendes que nous devons montrer, de sorte que toutes les légendes soient à égale distance les unes des autres. Nous avons divisé la légende par 2 pour qu’elle soit centrée dans son espace et qu’elle le soit au fur et à mesure de son avancement, au fur et à mesure que nous ajoutons (i * lSpace) aux légendes à venir.
Enregistrez toutes les modifications et essayez de naviguer index.html et vous devriez voir les légendes en dessous de l'axe X.
Ajoutons un peu de style aux légendes pour les rendre audacieuses. Ajoutez le CSS suivant à index.html:
.légende taille de la police: 14px; poids de police: gras;
Ajouter la classe Légende à la légende créée.
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "noir") .attr ("class "," légende ") .text (d.key);
Ajoutons maintenant des événements de clic sur chacune des légendes affichées pour basculer l'affichage de la ligne correspondante sur le graphique multiligne..
Tout d'abord, nous aurons besoin d'ajouter un identifiant pour chaque graphe linéaire créé afin de basculer son affichage.
.attr ('id', 'line _' + d.key)Voici à quoi ressemble le code de création de ligne:
vis.append ('svg: path') .attr ('d', lineGen (d.values, xScale, yScale)) .attr ('stroke', fonction (d, j) return "hsl (" + Math. random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('id', 'line_' + d.key) .attr ('fill' , 'aucun');Ensuite, dans la partie création de la légende, ajoutez le Cliquez sur attribut:
.on ('click', function () alert (d.key);)Enregistrer le changement et parcourir index.html. Cliquez sur les légendes et vous devriez voir les noms des légendes comme des alertes..
Ensuite, ajoutons le code pour basculer l’affichage des lignes. Nous devons simplement vérifier l'état d'affichage actuel du graphique linéaire et basculer l'opacité pour afficher et masquer la ligne en conséquence..
.on ('click', function () var active = d.active? false: true; var opacité = active? 0: 1; d3.select ("# ligne_" + d.key) .style ("opacité", opacité); d.active = active;)Enregistrez les modifications et essayez de parcourir index.html. Essayez de cliquer sur les légendes et l’affichage du graphique linéaire correspondant devrait basculer..
Dans ce tutoriel, nous avons vu comment rendre notre graphique multiligne dynamique. Nous avons également vu comment créer des événements D3.js. Pour des informations détaillées sur diverses autres méthodes et API D3.js, consultez la documentation officielle..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous!
