Les applications Web sont normalement pilotées par les données et il est souvent nécessaire de visualiser ces données. C’est là que les graphiques et les graphiques entrent en jeu. Ils facilitent la transmission d’informations, ainsi que la démonstration de corrélations ou de relations statistiques. Les informations présentées sous forme de graphique ou de graphique sont également plus faciles à comprendre pour un locuteur non natif.
Dans ce didacticiel, nous allons apprendre à visualiser des données dans un projet Vue. Pour ce faire, nous utiliserons la bibliothèque très répandue D3.js, qui combine de puissants composants de visualisation et une approche de la manipulation DOM basée sur les données.
Commençons par le début.
Remarque: le code de ce tutoriel. peut être trouvé sur GitHub .
Qu'est-ce que D3?
Comme vous pouvez le lire sur la page d'accueil du projet D3.js est une bibliothèque JavaScript permettant de manipuler des documents Les données. D3 vous aide à donner vie aux données en utilisant HTML, SVG et CSS. L’accent mis sur les standards du Web vous donne toutes les capacités des navigateurs modernes sans vous lier à un cadre propriétaire.
Alors que la plupart des gens se réfèreront à D3.js en tant que bibliothèque de visualisation de données, ce n’est pas . D3 est plutôt un framework comprenant différentes parties – telles que les parties jQuery (qui nous aident à sélectionner et manipuler les éléments DOM), les parties Lodash, les parties d'animation, les parties d'analyse des données et les parties de visualisation des données.
Dans ce didacticiel, nous allons travailler avec l'aspect de visualisation de D3. La qualité réelle de D3 lors de la visualisation de données est:
- la disponibilité de fonctions de décoration de données avec des instructions de dessin
- créant de nouvelles données pouvant être extraites à partir de données sources
- générant des chemins SVG
- créant des éléments de visualisation de données (comme un axe) ) dans le DOM à partir de vos données et méthodes
Ce que nous allons construire
Nous souhaitons créer une application permettant aux utilisateurs de rechercher un référentiel sur GitHub, puis d'obtenir une représentation visuelle des problèmes ouverts la semaine dernière. sont toujours ouverts. Le résultat final ressemblera à ceci:
Prérequis
Ce tutoriel suppose que vous avez une connaissance pratique de Vue . Une connaissance préalable de D3.js n’est pas nécessaire, mais si vous souhaitez vous mettre au diapason rapidement, vous voudrez peut-être lire notre D3 par exemple dans le tutoriel .
Vous aurez également besoin de avoir le nœud installé sur votre système. Vous pouvez le faire en téléchargeant les fichiers binaires de votre système sur le site Web officiel ou en utilisant un gestionnaire de version .
Enfin, nous utiliserons les packages suivants pour construire notre app:
- Vue CLI – échafauder le projet
- D3.js – visualiser nos données
- Lodash – qui fournit une poignée de méthodes utilitaires
- Moment JS – pour la mise en forme de la date et de l'heure
- axios – un client HTTP pour nous aider à adresser des requêtes à un API externe
New Vue Project
Je préfère créer de nouveaux projets Vue à l'aide de Vue CLI. (Si vous n'êtes pas familier avec Vue CLI, notre guide du débutant de cette série Vue en présente une introduction complète.) Vue CLI fournit une belle structure de dossiers permettant de placer différentes sections du code, telles que les styles, les composants, etc. 19659003] Assurez-vous que l'interface de ligne de commande est installée sur votre machine:
npm install -g @ vue / cli
Créez ensuite un nouveau projet avec la commande suivante:
vue create issues-visualization
Remarque: lors de la création d'un nouveau projet à l'aide de Vue CLI, vous serez invité à choisir un préréglage. Pour ce projet particulier, nous allons nous en tenir à la valeur par défaut (Babel + ESLint).
Une fois notre nouveau projet Vue créé, nous cd dans le dossier du projet et nous ajoutons les divers modules de nœuds dont nous aurons besoin:
npm install lodash d3 axios moment
Même s’il s’agit d’une application simple ne comportant pas beaucoup de parties en cours d’exécution, nous continuerons d’utiliser l’approche par composants au lieu de vider tout le code contenu dans le fichier App.vue . Nous allons avoir deux composants, le composant App et un composant Chart que nous n'avons pas encore créé.
Le composant App gérera récupérer les données de GitHub, puis les transmettre au composant Chart en tant qu'accessoires. Le dessin réel du graphique aura lieu à l'intérieur du composant Chart . Cette structuration présente l’avantage que, si vous souhaitez utiliser une bibliothèque autre que axios pour récupérer les données, il sera plus facile de les échanger. En outre, si vous souhaitez permuter D3 pour une autre bibliothèque de graphiques, ce sera aussi plus facile.
Création de l'interface de recherche
Nous allons commencer par créer une interface de recherche permettant aux utilisateurs de saisir le nom du référentiel qu'ils ont choisi. voulez voir visualisé.
Dans src / App.vue débarrassez-vous de tout ce qui se trouve à l'intérieur de la balise et remplacez le contenu par ceci:
Nous avons ici un formulaire qui, lors de la soumission, empêche l’action de soumission par défaut du navigateur, puis appelle une méthode getIssues que nous n’avons pas encore définie. Nous utilisons également une directive v-model pour lier l’entrée du formulaire à une propriété de référentiel dans le modèle de données de notre instance Vue. Déclarons cette propriété référentiel sous forme de chaîne vide. Nous ajouterons également une propriété startDate que nous utiliserons plus tard comme première date de notre intervalle de temps:
import moment à partir de "moment";
importer axios de "axios";
défaut d'exportation {
nom: "app",
Les données() {
revenir {
questions: [],
référentiel: "",
startDate: null
};
},
méthodes: {
getIssues () {
// le code entre ici
}
}
};
Nous allons maintenant créer la méthode getIssues :
getIssues () {
this.startDate = moment ()
.sous-soustrait (6, "jours")
.format ("AAAA-MM-JJ");
axios
.obtenir(
`https://api.github.com/search/issues?q=repo:$ {this.repository} + est: issue + est: ouverte + créée:> = $ {this.startDate}`,
{params: {per_page: 100}}
)
.then (réponse => {
const payload = this.getDateRange ();
response.data.items.forEach (item => {
clé const = moment (item.created_at) .format ("MMM Do YY");
const obj = payload.filter (o => o.day === clé) [0];
obj.issues + = 1;
});
this.issues = charge utile;
console.log (this.issues);
});
}
Dans le bloc de code ci-dessus, nous commençons par définir il y a six jours la propriété de données startDate et en la formatant pour une utilisation avec l'API GitHub.
Nous utilisons ensuite axios pour effectuer une demande d'API. sur GitHub pour obtenir tous les problèmes relatifs à un référentiel qui ont été ouverts la semaine dernière et qui sont toujours ouverts. Vous pouvez vous référer à L'API de recherche de GitHub si vous avez besoin d'exemples supplémentaires sur la définition de paramètres de chaîne de requête.
Lors de la création de la requête HTTP, nous définissons le nombre de résultats à 100 par page ). Il n'y a pratiquement pas de référentiels avec plus de 100 nouvelles émissions par semaine, donc cela devrait convenir à nos besoins. Par défaut, la valeur per_page est 30.
Si la requête aboutit, nous utilisons une méthode personnalisée getDateRange pour initialiser une variable de la charge utile . pouvoir passer à la composante Chart . Cette charge est un tableau d’objets qui plaira à tant:
[
{day: "Dec 7th 18", issues: 0},
{day: "Dec 8th 18", issues: 0},
{day: "Dec 9th 18", issues: 0},
{day: "Dec 10th 18", issues: 0},
{day: "Dec 11th 18", issues: 0},
{day: "Dec 12th 18", issues: 0},
{day: "Dec 13th 18", issues: 0}
]
Après cela, nous parcourons la réponse de l’API. Les données qui nous intéressent se trouvent dans une clé items sur une propriété data sur l’objet de réponse . De cela, nous prenons la clé created_at (qui est un horodatage) et la formatons comme la propriété day dans nos objets ci-dessus. À partir de là, nous recherchons la date correspondante dans le tableau de la charge utile et incrémentons le nombre de problèmes pour cette date de 1.
Enfin, nous affectons le tableau à la charge utile à notre [ questions propriété de données et consigner la réponse.
Ensuite, ajoutons la méthode getDateRange :
: {
getDateRange () {
const startDate = moment (). soustract (6, 'jours');
const endDate = moment ();
const dates = [];
while (startDate.isSameOrBefore (endDate)) {
dates.push ({
day: startDate.format ('MMM Do YY'),
questions: 0
});
startDate.add (1, «jours»);
}
dates de retour;
},
getIssues () {...}
}
Avant d’aborder le bit de visualisation, enregistrons également toutes les erreurs que nous pourrions rencontrer en adressant notre demande à la console (à des fins de débogage):
axios
.get (...)
.then (réponse => {
...
})
.catch (error => {
console.error (erreur);
});
Nous ajouterons une UX pour informer l’utilisateur au cas où quelque chose se serait passé plus tard.
Nous avons jusqu’à présent un champ de saisie permettant à l’utilisateur de saisir le nom de l’organisation / du référentiel pour lequel il souhaite effectuer une recherche. Lors de la soumission du formulaire, tous les numéros ouverts la semaine dernière sont enregistrés sur la console.
Vous trouverez ci-dessous un exemple de ce qui a été enregistré sur la console pour le dépôt facebook / react :
Si vous démarrez le serveur Vue dev avec npm run serve et si vous entrez des pensions différentes, vous devriez voir quelque chose de similaire. Si vous êtes en panne d'inspiration, jetez un œil à La page des tendances de GitHub .
Vient ensuite l'amusement: visualiser ces données.
Dessiner un graphique à barres avec D3
Nous avons déjà mentionné ce qui précède. que tous les dessins seront traités dans un composant Chart . Créons le composant:
touch src / components / Chart.vue
D3 fonctionne sur les éléments SVG, et pour que nous puissions dessiner quoi que ce soit avec D3, nous devons avoir un élément SVG sur la page. Dans notre composant nouvellement créé ( src / components / Chart.vue ), créons un tag SVG:
Pour ce didacticiel, nous allons visualiser nos données à l’aide d’un graphique à barres. J'ai choisi un graphique à barres car il représente un élément visuel peu complexe alors qu'il enseigne l'application de base de D3.js lui-même. Le graphique à barres est également une bonne introduction aux concepts D3 les plus importants, tout en s'amusant!
Avant de poursuivre, mettons à jour notre composant App afin d'inclure le composant Chart nouvellement créé. sous le formulaire:
Enregistrons-le également en tant que composant:
import Chart from './components/Chart.vue';
défaut d'exportation {
nom: "app",
Composants: {
Graphique
},
...
}
Remarquez comment nous transmettons la valeur de la propriété de données au composant Chart sous la forme d'un prop :
.
Mettons maintenant à jour notre composant Chart pour utiliser ces données:
Dans le bloc de code ci-dessus, nous importons D3 et Lodash. Nous instancions ensuite une propriété de données chart sous la forme null . Nous attribuerons une valeur à cela lorsque nous commencerons à dessiner plus tard.
Puisque nous voulons dessiner le graphique chaque fois que la valeur des problèmes change, nous avons créé un observateur pour . . Chaque fois que cette valeur change, nous allons détruire l’ancien graphique, puis dessiner un nouveau graphique.
Le dessin aura lieu dans la méthode renderChart . Commençons par préciser:
renderChart (issues_val) {
marge constante = 60;
const svg_width = 1000;
const svg_height = 600;
const chart_width = 1000 - 2 * margin;
const chart_height = 600 - 2 * margin;
const svg = d3
.select ("svg")
.attr ("width", svg_width)
.attr ("hauteur", svg_height);
}
Nous définissons ici la hauteur et la largeur de l'élément SVG que nous venons de créer. L’attribut margin est ce que nous allons utiliser pour donner à notre graphique un remplissage.
Le D3 est doté de fonctions de sélection et de manipulation du DOM. Tout au long du didacticiel, vous verrez beaucoup d’énoncés de d3.select et de d3.selectAll . La différence est que select renverra le premier élément correspondant alors que selectAll renverra tous les éléments correspondants.
Les axes
Pour les graphiques à barres, les données peuvent être représentées verticalement. ou format horizontal. D3 est livré avec les méthodes d'axe qui permettent de définir nos axes comme nous le souhaitons:
- axisLeft
- axisTop
- axisBottom
- axisRight
Aujourd'hui, nous allons créer un diagramme à barres verticales. Pour les graphiques à barres verticales, nous n’aurons besoin que des méthodes axisLeft et axisBottom :
renderChart (issues_val) {
...
this.chart = svg
.append ("g")
.attr ("transformer", `translate ($ {margin}, $ {margin})`);
const yScale = d3
.scaleLinear ()
.range ([chart_height, 0])
.domain ([0, _.maxBy(issues_val, "issues").issues]);
this.chart
.append ("g")
.call (d3.axisLeft (yScale) .ticks (_. maxBy (issues_val, "issues"). issues)));
const xScale = d3
.scaleBand ()
.range ([0, chart_width])
.domain (issues_val.map (s => à la journée))
.padding (0,2);
this.chart
.append ("g")
.attr ("transformer", `translate (0, $ {chart_height})`)
.call (d3.axisBottom (xScale));
}
Le bloc de code ci-dessus dessine des axes sur l'élément SVG. Passons en revue étape par étape:
this.chart = svg.append ('g')
.attr ('transformer', `translate ($ {margin}, $ {margin})`);
Nous précisons d'abord où nous voulons que notre graphique commence dans l'élément SVG. Lorsque vous utilisez D3, quel que soit l'élément que vous souhaitez ajouter au SVG, nous appelons généralement la méthode append puis définissons des attributs pour ce nouvel élément.
Pour ajouter des attributs à un élément, nous utilisons généralement appelez la méthode attr qui prend deux paramètres. Le premier paramètre est l'attribut que nous voulons appliquer à l'élément DOM sélectionné, et le deuxième paramètre est la valeur que nous voulons, ou une fonction de rappel qui renvoie la valeur souhaitée. Nous déplaçons ici le début du graphique vers les positions 60, 60 du SVG:
const yScale = d3.scaleLinear ()
.range ([chart_height, 0])
.domain ([0, _.maxBy(issues_val, 'issues').issues]);
this.chart.append ('g')
.call (d3.axisLeft (yScale)
.ticks (_. maxBy (issues_val, 'issues'). issues)));
Ce bloc de code dessine l'axe des ordonnées en utilisant les échelles D3 pour créer une échelle y. Les échelles sont des fonctions qui transformeront nos données en augmentant ou en diminuant sa valeur pour une meilleure visualisation.
La fonction range spécifie la longueur à diviser entre les limites des données en entrée. Vous avez peut-être remarqué que j'ai utilisé la hauteur comme premier paramètre et non pas zéro lors de l'appel de la plage. En effet, le système de coordonnées SVG commence à partir du coin supérieur gauche. Vous comprendrez mieux quand nous aurons dessiné les hauteurs de barre.
D'autre part, la fonction de domaine indique les valeurs minimale et maximale. des données d'entrée. Pour cet ensemble de données particulier, nous voulons commencer de zéro à la valeur la plus élevée de notre ensemble de données. Pensez au domaine en tant qu'entrée et à la plage en tant que sortie.
Après avoir défini une échelle y, nous utilisons cette échelle pour dessiner l'axe en appelant la méthode axisLeft qui prend la y-scale comme argument.
L'extrait de code ci-dessous dessine l'axe des x:
const xScale = d3.scaleBand ()
.range ([0, chart_width])
.domain (issues_val.map ((s) => chaque jour))
.padding (0.2)
this.chart.append ('g')
.attr ('transformer', `translate (0, $ {chart_height})`)
.call (d3.axisBottom (xScale));
Pour xScale nous utilisons la fonction scaleBand qui permet de diviser la plage en bandes et de calculer les coordonnées et les largeurs des barres avec un remplissage supplémentaire. En supposant que 3 soit le nombre maximal de problèmes soulevés pour toutes les dates, le graphique devrait ressembler à ceci:
Si vous testez cela dans votre navigateur avec le code que nous avons abordé jusqu'à présent , vous devriez voir quelque chose de similaire.
Maintenant assez avec les axes.
Dessin des barres
Pour notre graphique à barres, la largeur de la barre sera fixe et la hauteur de la barre variera en fonction de la taille du jeu de données:
renderChart (issues_val) {
...
const barGroups = this.chart
.selectAll ("rect")
.data (issues_val)
.entrer();
BarGroupes
.append ("rect")
.attr ("classe", "bar")
.attr ("x", g => xScale (g.day))
.attr ("y", g => yScale (g.issues))
.attr ("hauteur", g => chart_height - yScale (g.issues))
.attr ("width", xScale.bandwidth ());
}
Voyons comment nous avons ajouté les barres. Premièrement, nous avons créé un élément barGroups :
const barGroups = this.chart
.selectAll ('rect')
.data (issues_val)
.entrer()
L’appel de la méthode selectAll de notre graphique renvoie une sélection / un tableau vide, car nous n’avons encore aucun rectangle dans notre graphique. Nous enchaînons ensuite la méthode de données en transmettant le jeu de données que nous voulons visualiser. Cela met les données dans un état d'attente pour un traitement ultérieur.
L'étape suivante consiste à enchaîner la méthode enter . La méthode enter examine à la fois l'ensemble de données que nous avons passé dans data () et la sélection obtenue après avoir appelé selectAll () puis essaie de regarder pour les "correspondances" - plutôt comme une correspondance entre nos données exemple et les éléments déjà présents dans le DOM. Dans ce cas particulier, aucune correspondance n'a été trouvée.
Note: Cet article est un excellent guide pour comprendre les sélectionnez entrez et annexe séquence lors de l'utilisation de D3 pour manipuler le DOM.
Depuis selectAll ('rect') a renvoyé un tableau vide, la méthode enter retourne une nouvelle sélection représentant les éléments de notre ensemble de données.
Notez qu'après chaining enter () chaque élément du tableau retourné est traité individuellement. Cela signifie que toute méthode chaînée sur barGroups définira le comportement d'éléments individuels.
barGroups
.append ('rect')
.attr ('classe', 'bar')
.attr ('x', (g) => xScale (g.day))
.attr ('y', (g) => yScale (g.issues))
.attr ('height', (g) => chart_height - yScale (g.issues))
.attr ('width', xScale.bandwidth ());
Le bloc de code ci-dessus crée un rectangle pour chaque élément de notre ensemble de données. Nous attribuons à chacun de ces rectangles une classe de barre .
Pour définir les coordonnées x et y des rectangles, nous utilisons les fonctions de mise à l'échelle définies précédemment. Jusqu'à présent, ces rectangles sont superposés et nous devons leur donner une hauteur et une largeur
La largeur de nos barres serait déterminée par la fonction scaleBand . En chaînant la fonction de bande passante à la xScale renvoie une largeur de bande calculée à partir de la plage et du remplissage fournis à l'échelle x.
Pour définir la hauteur de la barre, nous soustrayons la valeur y calculée. coordonnée de la barre à partir de la hauteur du SVG pour obtenir la représentation correcte de la valeur sous forme de colonne. N'oubliez pas que, lorsque vous travaillez avec des fichiers SVG, les coordonnées x et y sont toujours calculées à partir du coin supérieur gauche.
Ajout d'étiquettes
Jusqu'à présent, nous avons un graphique à barres. Mais ce graphique n’est pas vraiment utile, car il ne dit pas à l’utilisateur ce que chaque axe représente. Pour donner plus de contexte à notre graphique, nous devrons ajouter des étiquettes pour les axes ainsi qu’un titre de graphique.
Pour ajouter des étiquettes, nous ajoutons des éléments de texte à notre SVG:
svg
.append ('text')
.attr ('classe', 'label')
.attr ('x', - (chart_height / 2) - margin)
.attr ('y', margin / 2.4)
.attr ('transformer', 'faire pivoter (-90)')
.attr ('text-anchor', 'middle')
.text ('Problèmes ouverts')
svg
.append ('text')
.attr ('classe', 'label')
.attr ('x', chart_width / 2 + marge)
.attr ('y', chart_height + margin * 1.7)
.attr ('text-anchor', 'middle')
.text ('Jours')
svg
.append ('text')
.attr ('classe', 'titre')
.attr ('x', chart_width / 2 + marge)
.attr ('y', 40)
.attr ('text-anchor', 'middle')
.text ('Problèmes au cours de la dernière semaine')
Les éléments de texte peuvent être positionnés avec les coordonnées x et y, tandis que l'alignement du texte est effectué avec l'attribut text-anchor . Pour ajouter le texte lui-même, nous appelons la méthode text sur l'élément text.
Nous pouvons tester les choses en servant notre application, puis en recherchant un repo. Recherchez un dépôt quelconque - tel que facebook / react :
Dans notre App nous pouvons maintenant nous débarrasser de l'instruction console dans la méthode getIssues :
console.log (this.issues)
Même si notre graphique visualise très bien nos données, il reste encore beaucoup à faire en termes d’expérience utilisateur. Dans la section suivante, nous verrons comment ajouter des transitions aux graphiques D3.
Ajout des transitions
Pour ce graphique particulier, nous voulons faire en sorte que, lorsque vous survolez un élément de barre, sa nuance change. et le nombre de problèmes représentés par la barre apparaît en haut de la barre.
Pour que cela se produise, nous devons procéder à une gestion des événements sur mouseEnter et . ] mouseLeave pour le barGroups .
Modifiez le bloc barGroups au-dessus des trois svg blocs:
barGroups
...
.attr ("width", xScale.bandwidth ())
.on ("mouseenter", fonction (actuel, i) {
d3.select (this)
.transition()
.durée (300)
.attr ("opacité", 0.6)
.attr ("x", a => xScale (a.day) - 5)
.attr ("width", xScale.bandwidth () + 10);
BarGroupes
.append ("text")
.attr ("classe", "valeur")
.attr ("x", a => xScale (a.day) + xScale.bandwidth () / 2)
.attr ("y", a => yScale (a.issues) - 20)
.attr ("text-anchor", "middle")
.text ((a, idx) => {
retourne idx! == i? "": `$ {a.issues} issues`;
});
});
Nous appelons la méthode de transition pour ajouter des animations à un élément lors de l'utilisation de D3.
Chaque fois que le curseur survole une barre, nous réduisons l'opacité de la barre et augmentons sa largeur de 10px . Nous ajoutons également un texte en haut de la barre, indiquant le nombre de problèmes représentés par la barre. Cette transition prend une durée de 300 millisecondes.
Comme nous ne voulons pas laisser cette barre dans l'état neuf à la sortie de la souris, définissons un événement mouseleave ce qui supprime les fonctions de sélection que nous avions. appliqué à l'événement mouseenter :
barGroups
...
.attr ("width", xScale.bandwidth ())
.on ("mouseenter", fonction (actuel, i) {...})
.on ("mouseleave", function () {
d3.selectAll (". issues"). attr ("opacity", 1);
d3.select (this)
.transition()
.durée (300)
.attr ("opacité", 1)
.attr ("x", a => xScale (a.day))
.attr ("width", xScale.bandwidth ());
svg.selectAll (". valeur"). remove ();
});
Ce que nous faisons ci-dessus consiste à définir l'opacité de la barre sur la valeur d'origine et à supprimer le texte de la barre.
svg.selectAll ('. Value'). Remove ();
Le code ci-dessus supprime tout texte sur le DOM ayant une classe de valeur .
Voici le résultat final:
Si vous essayez Dans votre navigateur, vous devriez voir quelque chose comme ce qui précède.
Quelques touches finales UI / UX
Lors de la demande auprès de GitHub, nous prévoyons un délai de chargement avant de recevoir une réponse de GitHub. Pour les besoins de l’UX, nous informerons l’utilisateur que nous récupérons toujours les résultats de GitHub en faisant apparaître une alerte de chargement sur la page. Dans le composant App ajoutez cet extrait à la section HTML de votre code - juste au-dessus du composant Chart :
Loading ...
À des fins de prototypage, nous utiliserons Bootstrap. Vue a un paquet Bootstrap officiel que nous allons installer:
npm install bootstrap-vue
Une fois le paquet installé, nous devrons importer les classes CSS de Bootstrap dans notre fichier main.js pour que l’alerte s’affiche:
[...].
importer "bootstrap / dist / css / bootstrap.css";
importer "bootstrap-vue / dist / bootstrap-vue.css";
Nous avons presque terminé, mais nous devons ajouter un attribut loading à notre modèle de données - dont la valeur déterminera si l’alerte de chargement doit être affichée:
data () {
revenir {
chargement: faux,
...
};
},
Chaque fois que nous faisons une nouvelle demande, nous définissons la valeur de loading sur true . L'alerte s'affiche, puis nous définissons finalement cette valeur sur false pour les demandes abouties ou dans le cas où l'application est erronée:
getIssues () {
this.loading = true;
...
axios.get (...)
.puis( ... )
.capture( ... )
.finally (() => (this.loading = false));
}
Gestion des erreurs
Dans l’état actuel des choses, nous ne faisons que consigner les erreurs que nous pourrions rencontrer sur la console - quelque chose que l’utilisateur ne sait pas. Pour que l’utilisateur sache que quelque chose ne va pas lors de la demande, une alerte d’erreur apparaît sur la page. Ajoutez cet extrait sous l'alerte de chargement que nous venons de créer:
Une erreur est survenue
Nous devons également mettre à jour notre modèle de données avec l'attribut errored que nous initialisons avec une valeur false :
data () {
revenir {
chargement: faux,
errored: false,
...
};
},
Nous allons définir la valeur erronée sur true chaque fois que nous rencontrons une erreur. Cela devrait se produire à l'intérieur du bloc de capture:
getIssues () {
this.loading = true;
this.errored = false;
...
axios.get (...)
.puis( ... )
.catch (error => {
console.error (erreur);
this.errored = true;
})
.enfin( ... );
}
Quelques styles de base
Les lecteurs aux yeux d'aigle auront remarqué que, sur la capture d'écran en haut de ce guide, les barres étaient de couleur bleue. Ajoutons cela comme touche finale à notre composant App :
Conclusion
Félicitations pour votre réussite. Même si nous avons un graphique à barres fonctionnel, nous pouvons encore faire plus pour rendre le graphique plus attrayant. Nous pourrions, par exemple, ajouter des lignes de grille ou visualiser ces données à l'aide d'un graphique à courbes.
Nous avons dessiné un simple graphique à barres, mais D3.js possède des capacités incroyables en termes de possibilités. Toute visualisation de données que vous avez vue n’importe où, y compris les présentations PowerPoint, peut probablement être gérée par D3. Cet article est une bonne lecture de certaines des choses que D3 est capable de faire. Vous pouvez également consulter D3 sur GitHub pour consulter d'autres cas d'utilisation .
Chris est développeur de logiciels chez Andela. Il a travaillé avec Rails, Laravel et des blogs pour partager quelques astuces. Chris aime aussi voyager.
Source link