DC.js - Datentabelle
Die Datentabelle wird verwendet, um die Datensätze in einem Tabellenformat anzuzeigen. Es listet die Crossfilter-Dataset-Datensätze auf, wie in diesem Kapitel ausführlich erläutert.
Datentabellenmethoden
Bevor wir mit dem Zeichnen einer Datentabelle fortfahren, sollten wir das verstehen dc.dataTableKlasse und ihre Methoden. Es verwendet ein Mixin, um die grundlegenden Funktionen zum Zeichnen eines Datentabellendiagramms zu erhalten, das im Folgenden definiert wird:
- dc.baseMixin
Die dc.dataTable ruft alle Methoden dieses Mixins ab und verfügt über eigene Methoden zum Zeichnen der Datentabelle, die wie folgt 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.
In ähnlicher Weise können Sie auch die Funktion endSlice () ausführen.
Spalten ([Spalten])
Diese Methode wird verwendet, um die Spaltenfunktionen abzurufen oder festzulegen. Mit der folgenden Methode werden die anzuzeigenden Spalten angegeben.
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; }
]);Hier repräsentiert d eine Zeile im Datensatz. Wir können HTML verwenden, um Spalten in der Datentabelle anzuzeigen.
group (groupFunction)
Mit dieser Methode wird die Gruppenfunktion für die Datentabelle ausgeführt.
Bestellung ([Bestellung])
Es wird verwendet, um die Bestellfunktion zu sortieren. Wenn die Reihenfolge aufsteigend ist, verwendet die Dimension () .bottom (), um die Daten abzurufen, andernfalls wird dimension (). Top () verwendet.
Beispiel für eine Datentabelle
Lassen Sie uns eine Datentabelle in DC erstellen. Dazu müssen wir die folgenden Schritte ausführen -
Schritt 1: Stile hinzufügen
Fügen wir dem CSS Stile hinzu, indem wir die unten angegebene Codierung verwenden -
.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; }Hier haben wir Stile für das Diagramm, die Tabellengruppe und die Rasterspalte zugewiesen.
Schritt 2: Erstellen Sie eine Variable
Lassen Sie uns eine Variable in DC erstellen, wie unten gezeigt -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");Hier haben wir eine barChart-Variablen-ID in der Zeile zugewiesen, die countChart-ID ist mystats und die tableChart-ID ist mytable.
Schritt 3: Lesen Sie die Daten
Lesen Sie die Daten aus der Datei people.csv wie unten gezeigt -
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Wenn die Daten nicht 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 wie folgt aus -
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 die Datentabelle
Erstellen Sie nun die Datentabelle mit der unten angegebenen Codierung -
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Hier haben wir die Altersdimension angegeben und die Daten gruppiert.
Schritt 7: Rendern Sie die Tabelle
Rendern Sie nun das Raster mit der folgenden Codierung -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();Hier haben wir die Spalten mit dem DOB sortiert und die Datensätze sortiert.
Schritt 8: Arbeitsbeispiel
Der vollständige Code lautet wie folgt. Erstellen Sie eine Webseite datatable.html und fügen Sie die folgenden Änderungen hinzu.
<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>Fordern Sie jetzt den Browser an und Sie sehen die folgende Antwort.
Nach Auswahl eines Alters zwischen 20 und 30 Jahren werden die Tabellendatensätze angezeigt (siehe Abbildung unten).
