DC.js - Tableau de données
La table de données est utilisée pour afficher les enregistrements dans un format tabulaire. Il répertorie les enregistrements du jeu de données crossfilter comme expliqué en détail dans ce chapitre.
Méthodes de table de données
Avant de commencer à dessiner un tableau de données, nous devons comprendre le dc.dataTableclass et ses méthodes. Il utilise un mixin pour obtenir la fonctionnalité de base de dessin d'un graphique de table de données, qui est défini ci-dessous -
- dc.baseMixin
Le dc.dataTable récupère toutes les méthodes de ce mixin et a ses propres méthodes pour dessiner la table de données, qui sont expliquées comme suit.
beginSlice ([tranche])
Cette méthode est utilisée pour obtenir ou définir l'index de la tranche de début. Cette méthode est utile lors de l'implémentation de la pagination.
De même, vous pouvez également exécuter la fonction endSlice ().
colonnes ([colonnes])
Cette méthode est utilisée pour obtenir ou définir les fonctions de colonne. Il utilise la méthode suivante pour spécifier les colonnes à afficher.
chart.columns([
function(d) { return d.mark; },
function(d) { return d.low; },
function(d) { return d.high; },
function(d) { return numberFormat(d.high - d.low); },
function(d) { return d.volume; }
]);Ici, d représente une ligne dans l'ensemble de données. Nous pouvons utiliser HTML pour afficher les colonnes dans la table de données.
groupe (groupFunction)
Cette méthode est utilisée pour exécuter la fonction de groupe pour la table de données.
commande ([commande])
Il est utilisé pour trier la fonction de commande. Si l'ordre est croissant, alors la dimension () utilisera .bottom () pour récupérer les données, sinon elle utilisera dimension (). Top ().
Exemple de tableau de données
Faisons un tableau de données dans DC. Pour ce faire, nous devons suivre les étapes ci-dessous -
Étape 1: ajouter des styles
Ajoutons des styles dans le CSS en utilisant le codage donné ci-dessous -
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }Ici, nous avons attribué des styles pour le graphique, le groupe de tableaux et la colonne de grille.
Étape 2: créer une variable
Créons une variable dans DC comme indiqué ci-dessous -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");Ici, nous avons attribué un id de variable barChart en ligne, countChart id est mystats et l'id tableChart est mytable.
Étape 3: lire les données
Lisez les données du fichier people.csv comme indiqué ci-dessous -
d3.csv("data/people.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é. Ici, nous avons utilisé le même fichier people.csv, qui a été utilisé dans nos exemples de graphiques précédents.
Cela ressemble à ceci -
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 4: définir la dimension
Vous pouvez définir la dimension en utilisant le codage ci-dessous -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Une fois la dimension attribuée, groupez l'âge en utilisant le codage ci-dessous -
var ageGroup = ageDimension.group().reduceCount();Étape 5: Générer un graphique
Maintenant, générez un graphique à barres en utilisant le codage donné ci-dessous -
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);Ici,
- Nous avons attribué la largeur du graphique à 400 et la hauteur à 200.
- Ensuite, nous avons spécifié la plage de domaine comme [15,70].
- Nous avons défini l'étiquette de l'axe x comme âge et l'étiquette de l'axe y comme compte.
- Nous avons spécifié la fonction ElasticY et X comme true.
Étape 6: Créez la table de données
Maintenant, créez la table de données en utilisant le codage donné ci-dessous -
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Ici, nous avons spécifié la dimension d'âge et regroupé les données.
Étape 7: rendre le tableau
Maintenant, rendez la grille en utilisant le codage ci-dessous -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();Ici, nous avons trié les colonnes à l'aide de la date de naissance et trié les enregistrements.
Étape 8: Exemple de travail
Le code complet est le suivant. Créez une page Web datatable.html et ajoutez-y les modifications suivantes.
<html>
<head>
<title>DC datatable sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
<div style = "clear: both">
<div id = "mytable"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
});
</script>
</body>
</html>Maintenant, demandez le navigateur et vous verrez la réponse suivante.
Après avoir sélectionné un âge entre 20 et 30 ans, il affiche les enregistrements du tableau comme indiqué dans la capture d'écran ci-dessous -
