DC.js - Seriendiagramm
Eine Serie ist ein Datensatz. Sie können ein Diagramm basierend auf den Daten zeichnen. In diesem Kapitel wird das Zeichnen eines Seriendiagramms im Detail erläutert.
Seriendiagrammmethoden
Bevor wir mit dem Zeichnen eines Seriendiagramms fortfahren, sollten wir das verstehen dc.seriesChartKlasse und ihre Methoden. Das dc.seriesChart verwendet Mixins, um die Grundfunktionen zum Zeichnen eines Diagramms zu erhalten. Das vom dc.seriesChart verwendete Mixin ist -
- dc.stackMixin
Das vollständige Klassendiagramm des dc.seriesChart lautet wie folgt:
Das dc.seriesChart ruft alle Methoden der oben angegebenen Mixins ab. Es hat seine eigenen Methoden, um das Seriendiagramm zu zeichnen, die unten erklärt werden -
Diagramm ([Funktion])
Diese Methode wird verwendet, um die Diagrammfunktion abzurufen oder festzulegen.
seriesAccessor ([Accessor])
Es wird verwendet, um die Accessor-Funktion für die angezeigte Serie abzurufen oder einzustellen.
seriesSort ([sortFunction])
Diese Methode wird verwendet, um eine Funktion zum Sortieren der Serienliste durch Angabe von Serienwerten abzurufen oder festzulegen.
valueSort ([sortFunction])
Diese Methode wird verwendet, um eine Funktion zum Sortieren der Werte jeder Reihe abzurufen oder festzulegen.
Zeichnen Sie ein Seriendiagramm
Zeichnen wir ein Seriendiagramm in DC. Nehmen wir in diesem Beispiel einen Datensatz mit dem Namen people_hw.csv. Die Beispieldatendatei lautet wie folgt:
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
...............
...............Die obige Beispieldatei enthält viele Datensätze. Sie können die Datei herunterladen, indem Sie auf den folgenden Link klicken und sie an Ihrem DC-Speicherort speichern.
people_hw.csv
Lassen Sie uns nun die folgenden Schritte ausführen, um ein Seriendiagramm in DC zu zeichnen.
Schritt 1: Definieren Sie eine Variable
Definieren wir die Variable wie unten gezeigt -
var chart = dc.seriesChart('#line');Hier wird die seriesChart-Funktion der ID-Zeile zugeordnet.
Schritt 2: Lesen Sie die Daten
Daten aus der Datei people_hw.csv lesen -
d3.csv("data/people_hw.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. Sobald wir die Daten erhalten haben, können wir sie einzeln abrufen und das Geschlecht anhand der unten angegebenen Codierung überprüfen.
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});Schritt 3: Erstellen Sie eine Altersdimension
Erstellen Sie nun eine Dimension für das Alter wie unten gezeigt -
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});Hier haben wir die Dimension zugewiesen und sie gibt das Geschlecht und die Größe zurück. Gruppieren Sie es jetzt mit demreduceCount() Funktion, die unten definiert ist -
var hwGroup = hwDimension.group().reduceCount();Schritt 4: Erstellen Sie ein Diagramm
Erstellen Sie nun ein Seriendiagramm mit der unten angegebenen Codierung -
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();Hier,
- Die Diagrammbreite beträgt 800 und die Höhe 600.
- Mit der Methode d3.scale.linear () geben wir den Domänenwert an.
- Mit der Funktion seriesAccessor wird die Serie für das Datum angezeigt.
- Der Schlüssel- und Wertzugriffsgeber gibt den Schlüssel und den Wert aus der Serie zurück.
- Legende kann verwendet werden, um Höhe und Breite hinzuzufügen.
Schritt 5: Arbeitsbeispiel
Die vollständige Codeliste lautet wie folgt. Erstellen Sie eine Webseiteline_series.html und fügen Sie die folgenden Änderungen hinzu.
<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>Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.
