DC.js - Datenraster
Das Datenraster wird zum Filtern und Anzeigen der Datensätze verwendet. In diesem Kapitel wird das Datenraster ausführlich erläutert.
Datenrastermethoden
Bevor wir mit dem Zeichnen eines Datenrasters fortfahren, sollten wir das verstehen dc.dataGridKlasse und ihre Methoden. Diese Klasse verwendet ein Mixin, um die grundlegenden Funktionen zum Zeichnen eines Datengitterdiagramms abzurufen, die im Folgenden definiert werden:
- dc.baseMixin
Das dc.dataGrid ruft alle Methoden dieses Mixins ab und verfügt über eigene Methoden zum Zeichnen des Datenrasters, die im Folgenden erläutert werden.
beginSlice ([Slice])
Diese Methode wird verwendet, um den Index des Anfangs-Slice abzurufen oder festzulegen. Diese Methode ist nützlich, wenn Sie eine Paginierung implementieren.
Ebenso können Sie endSlice () ausführen.
Gruppe (Funktion)
Mit dieser Methode wird die Gruppenfunktion für das Datenraster ausgeführt.
html ([html])
Diese Methode wird verwendet, um die Funktion zum Generieren eines dynamischen HTML-Codes abzurufen oder festzulegen.
Bestellung ([Bestellung])
Es wird verwendet, um die Bestellfunktion zu sortieren.
Größe ([Größe])
Es wird verwendet, um die Anzahl der Elemente im Raster anzuzeigen.
sortBy ([sortByFunction])
Diese Methode wird verwendet, um die Sortierfunktion abzurufen oder festzulegen. Mit dieser Funktion können wir ein bestimmtes Feld sortieren. Zum Beispiel: Wir können nach Alter sortieren, das unten definiert ist -
chart.sortBy(function(d) {
return d.age;
});Beispiel für ein Datenraster
Lassen Sie uns ein Datenraster in DC durchführen. Dazu müssen wir die folgenden Schritte ausführen -
Schritt 1: Stile hinzufügen
Fügen wir Stile in CSS hinzu, indem wir die folgende Codierung verwenden:
.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }Hier haben wir die Stile für das Diagramm, das Raster oben und das Rasterelement zugewiesen.
Schritt 2: Erstellen Sie eine Variable
Lassen Sie uns eine Variable in DC erstellen, wie unten erläutert -
var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");Hier haben wir eine barChart-Variablen-ID in der Zeile zugewiesen, die countChart-ID ist mystats und die gridChart-ID ist mygrid.
Schritt 3: Lesen Sie die Daten
Lesen Sie die Daten aus dem people.csv Datei wie unten gezeigt -
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Wenn keine Daten vorhanden sind, wird ein Fehler zurückgegeben. Ordnen Sie nun die Daten einem Crossfilter zu.
Hier haben wir dieselbe people.csv-Datei verwendet, die in unseren vorherigen Diagrammbeispielen verwendet wurde. Es sieht aus wie unten gezeigt -
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
..........................................
.........................................Schritt 4: Stellen Sie die Dimension ein
Sie können die Dimension mit der unten angegebenen Codierung einstellen -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Nachdem die Dimension zugewiesen wurde, gruppieren Sie das Alter mit der unten angegebenen Codierung -
var ageGroup = ageDimension.group().reduceCount();Schritt 5: Erstellen Sie ein Diagramm
Erstellen Sie nun ein Balkendiagramm mit der unten angegebenen Codierung -
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);Hier,
- Wir haben die Diagrammbreite als 400 und die Höhe als 200 zugewiesen.
- Als nächstes haben wir den Domänenbereich als [15,70] angegeben.
- Wir haben die Beschriftung der x-Achse als Alter und die Beschriftung der y-Achse als Anzahl festgelegt.
- Wir haben die elastische Y- und X-Funktion als wahr angegeben.
Schritt 6: Erstellen Sie das Rasterdiagramm
Erstellen Sie nun das Rasterdiagramm mit der unten angegebenen Codierung -
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Schritt 7: Rendern Sie das Raster
Rendern Sie nun das Raster mit der unten angegebenen Codierung -
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
countChart.render();
gridChart.render();Hier haben wir den Namen mit der Funktion html () sortiert und schließlich das Diagramm gerendert.
Schritt 8: Arbeitsbeispiel
Der vollständige Code lautet wie folgt. Erstellen Sie eine Webseitedatagrid.html und fügen Sie die folgenden Änderungen hinzu.
<html>
<head>
<title>DC datagrid 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-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { 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 class = "dc-data-grid" id = "mygrid"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line');
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");
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());
gridChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(100)
.htmlGroup (function(d) {
return 'Age: ' + d.key +
'; Count: ' + d.values.length +
' people'
})
.html (function(d) { return d.name; })
.sortBy(function (d) {
return d.name;
})
.order(d3.ascending);
barChart.render();
countChart.render();
gridChart.render();
});
</script>
</body>
</html>Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.
Das Rasterdiagramm sieht zunächst wie im folgenden Screenshot aus.
Wenn Sie ein bestimmtes Alter zwischen 63 und 66 Jahren auswählen, werden die folgenden Datensätze herausgefiltert.
