DC.js - Graphique des séries
Une série est un ensemble de données. Vous pouvez tracer un graphique en fonction des données. Ce chapitre explique comment dessiner un graphique en série en détail.
Méthodes de graphique de série
Avant de commencer à dessiner un graphique en série, nous devons comprendre le dc.seriesChartclass et ses méthodes. Le dc.seriesChart utilise Mixins pour obtenir les fonctionnalités de base de dessin d'un graphique. Le mixin utilisé par le dc.seriesChart est -
- dc.stackMixin
Le diagramme de classes complet de dc.seriesChart est le suivant -
Le dc.seriesChart obtient toutes les méthodes des mixins spécifiés ci-dessus. Il a ses propres méthodes pour dessiner le graphique de série, qui sont expliquées ci-dessous -
graphique ([fonction])
Cette méthode est utilisée pour obtenir ou définir la fonction de graphique.
seriesAccessor ([accesseur])
Il est utilisé pour obtenir ou définir la fonction d'accesseur pour la série affichée.
seriesSort ([sortFunction])
Cette méthode est utilisée pour obtenir ou définir une fonction pour trier la liste des séries en donnant des valeurs de série.
valueSort ([sortFunction])
Cette méthode est utilisée pour obtenir ou définir une fonction pour trier les valeurs de chaque série.
Dessinez un graphique de série
Dessinez un graphique de série dans DC. Dans cet exemple, prenons un ensemble de données nommé people_hw.csv. L'exemple de fichier de données est le suivant -
id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52
...............
...............L'exemple de fichier ci-dessus contient de nombreux enregistrements. Vous pouvez télécharger le fichier en cliquant sur le lien suivant et l'enregistrer dans votre emplacement DC.
people_hw.csv
Maintenant, adhérons aux étapes suivantes pour dessiner un graphique de série dans DC.
Étape 1: définir une variable
Définissons la variable comme indiqué ci-dessous -
var chart = dc.seriesChart('#line');Ici, la fonction seriesChart est mappée avec la ligne id.
Étape 2: lire les données
Lire les données du fichier people_hw.csv -
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Si les données ne sont pas présentes, cela renvoie une erreur. Maintenant, attribuez les données à un filtre croisé. Une fois que nous obtenons les données, nous pouvons les récupérer une par une et vérifier le sexe en utilisant le codage ci-dessous -
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});Étape 3: créer une dimension d'âge
Maintenant, créez une dimension pour l'âge comme indiqué ci-dessous -
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});Ici, nous avons attribué la dimension et elle renvoie le sexe et la hauteur. Maintenant, groupez-le en utilisant lereduceCount() fonction, qui est définie ci-dessous -
var hwGroup = hwDimension.group().reduceCount();Étape 4: Générer un graphique
Maintenant, générez un graphique de série en utilisant le codage donné ci-dessous -
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
.itemWidth(60));
chart.render();Ici,
- La largeur du graphique est de 800 et la hauteur de 600.
- En utilisant la méthode d3.scale.linear (), nous spécifions la valeur du domaine.
- À l'aide de la fonction seriesAccessor, il affiche la série de la référence.
- L'accesseur de clé et de valeur renvoie la clé et la valeur de la série.
- La légende peut être utilisée pour ajouter de la hauteur et de la largeur.
Étape 5: Exemple de travail
La liste complète des codes est la suivante. Créer une page Webline_series.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>Series chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div id = "line"></div>
</div>
<script language = "javascript">
var chart = dc.seriesChart('#line');
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
.legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
.legendWidth(120).itemWidth(60));
chart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et nous verrons la réponse suivante.
