DC.js - Grafico in serie
Una serie è un insieme di dati. Puoi tracciare un grafico in base ai dati. Questo capitolo spiega come disegnare in dettaglio un grafico in serie.
Metodi del grafico in serie
Prima di passare a disegnare un grafico in serie, dovremmo capire il dc.seriesChartclasse e i suoi metodi. Il dc.seriesChart utilizza Mixin per ottenere la funzionalità di base di disegnare un grafico. Il mixin utilizzato da dc.seriesChart è -
- dc.stackMixin
Il diagramma delle classi completo di dc.seriesChart è il seguente:
Dc.seriesChart ottiene tutti i metodi dei mixin sopra specificati. Ha i suoi metodi per disegnare il grafico delle serie, che sono spiegati di seguito:
grafico ([funzione])
Questo metodo viene utilizzato per ottenere o impostare la funzione del grafico.
seriesAccessor ([accessor])
Viene utilizzato per ottenere o impostare la funzione di accesso per la serie visualizzata.
seriesSort ([sortFunction])
Questo metodo viene utilizzato per ottenere o impostare una funzione per ordinare l'elenco di serie fornendo valori di serie.
valueSort ([sortFunction])
Questo metodo viene utilizzato per ottenere o impostare una funzione per ordinare i valori di ciascuna serie.
Disegna un grafico in serie
Disegniamo un grafico in serie in DC. In questo esempio, prendiamo un set di dati denominato people_hw.csv. Il file di dati di esempio è il seguente:
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
...............
...............Il file di esempio precedente contiene molti record. È possibile scaricare il file facendo clic sul collegamento seguente e salvarlo nella posizione del controller di dominio.
Ora, seguiamo i seguenti passaggi per disegnare un grafico in serie in DC.
Passaggio 1: definire una variabile
Definiamo la variabile come mostrato di seguito -
var chart = dc.seriesChart('#line');Qui, la funzione seriesChart è mappata con la linea id.
Passaggio 2: leggere i dati
Leggi i dati dal file people_hw.csv -
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Se i dati non sono presenti, restituisce un errore. Ora, assegna i dati a un filtro incrociato. Una volta ottenuti i dati, possiamo recuperarli uno per uno e controllare il sesso utilizzando la codifica fornita di seguito -
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});Passaggio 3: crea una dimensione età
Ora, crea una dimensione per l'età come mostrato di seguito:
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});Qui abbiamo assegnato la dimensione e restituisce il sesso e l'altezza. Ora, raggruppalo usando il filereduceCount() funzione, che è definita di seguito -
var hwGroup = hwDimension.group().reduceCount();Passaggio 4: genera un grafico
Ora, genera un grafico in serie utilizzando la codifica fornita di seguito:
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();Qui,
- La larghezza del grafico è 800 e l'altezza è 600.
- Utilizzando il metodo d3.scale.linear (), specifichiamo il valore del dominio.
- Utilizzando la funzione seriesAccessor, visualizza la serie per il dato.
- La funzione di accesso a chiave e valore restituisce la chiave e il valore dalla serie.
- La legenda può essere utilizzata per aggiungere altezza e larghezza.
Passaggio 5: esempio di lavoro
L'elenco completo del codice è il seguente. Crea una pagina webline_series.html e aggiungi le seguenti modifiche.
<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>Ora, richiedi il browser e vedremo la seguente risposta.
