DC.js - Graphique en courbes
Un graphique linéaire est utilisé pour afficher les informations sous la forme d'une série de points de données reliés par des lignes droites. Un point de données représente deux valeurs, l'une tracée le long de l'axe horizontal et l'autre le long de l'axe vertical. Par exemple, la popularité des produits alimentaires peut être dessinée sous la forme d'un graphique linéaire de telle sorte que l'aliment soit représenté le long de l'axe des x et sa popularité le long de l'axe des y. Ce chapitre explique en détail les graphiques en courbes.
Méthodes de graphique en courbes
Avant de passer à dessiner un graphique linéaire, nous devons comprendre le dc.lineChartclass et ses méthodes. Le dc.lineChart utilise des mixins pour obtenir les fonctionnalités de base du dessin d'un graphique. Les mixins utilisés par dc.lineChart sont les suivants -
- dc.stackMixin
- dc.coordinateGridMixin
Le diagramme de classes complet de dc.lineChart est le suivant -
Le dc.lineChart obtient toutes les méthodes des mixins spécifiés ci-dessus ainsi que ses propres méthodes pour dessiner le graphique en courbes. Ils sont expliqués comme suit.
dashStyle ([style])
Cette méthode est utilisée pour définir le style de tiret d'un graphique en courbes.
dotRadius ([rayon])
Cette méthode est utilisée pour obtenir ou définir le rayon (en PX) des points affichés sur les points de données. Il est défini comme suit -
chart.dotRadius = function (radius) {
if (!arguments.length) {
return radius;
}
};interpoler ([i])
Cette méthode est utilisée pour obtenir ou définir l'interpolateur d'une ligne.
renderArea ([zone])
Cette méthode est utilisée pour obtenir ou définir la zone de rendu.
renderDataPoints ([options])
Cette méthode est utilisée pour rendre des points individuels pour chaque point de données.
tension ([tension])
Cette méthode est utilisée pour obtenir ou définir la tension des lignes tracées. Il est compris entre 0 et 1.
xyTipsOn ([xyTipsOn])
Cette méthode est utilisée pour modifier le comportement de la souris d'un point de données individuel.
Dessinez un graphique linéaire
Laissez-nous dessiner un graphique en courbes dans DC. Pour ce faire, nous devons suivre les étapes ci-dessous -
Étape 1: définir une variable
Définissons une variable comme indiqué ci-dessous -
var chart = dc.lineChart('#line');Ici, la fonction dc.linechart est mappée avec le conteneur ayant un id line.
Étape 2: lire les données
Lire les données du people.csv fichier -
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Ici, si nous avons utilisé le même ensemble de données people.csv, l'exemple de fichier de données sera le suivant -
id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay
...............
................
................Étape 3: créer une dimension d'âge
Maintenant, créez une dimension pour l'âge comme indiqué ci-dessous -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Ici, nous avons attribué l'âge à partir des données Crossfilter.
Le ~~ est un double opérateur PAS au niveau du bit. Il est utilisé comme un substitut plus rapide duMath.floor() fonction.
Maintenant, groupez-le en utilisant le reduceCount() fonction, qui est définie ci-dessous -
var ageGroup = ageDimension.group().reduceCount();Étape 4: Générer un graphique
Maintenant, générez un graphique en courbes en utilisant le codage donné ci-dessous -
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();Ici,
La largeur du graphique est de 800 et la hauteur de 300.
La fonction d3.scale.linear est utilisée pour construire une nouvelle échelle linéaire avec la plage de domaine spécifiée [15, 70].
Ensuite, nous définissons le brushOn valeur à false.
Nous attribuons l'étiquette de l'axe y comme count et étiquette de l'axe des x comme age.
Enfin, groupez l'âge en utilisant ageGroup.
Étape 5: Exemple de travail
La liste complète des codes est affichée dans le bloc de code suivant. Créer une page Webline.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>DC.js Line Chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.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.lineChart('#line');
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
chart
.width(800)
.height(300)
.x(d3.scale.linear().domain([15,70]))
.brushOn(false)
.yAxisLabel("Count")
.xAxisLabel("Age")
.dimension(ageDimension)
.group(ageGroup)
.on('renderlet', function(chart) {
chart.selectAll('rect').on('click', function(d) {
console.log('click!', d);
});
});
chart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et nous verrons la réponse suivante.