DC.js - Tabella dati
La tabella dati viene utilizzata per visualizzare i record in formato tabulare. Elenca i record del set di dati crossfilter come spiegato in dettaglio in questo capitolo.
Metodi della tabella dati
Prima di passare a disegnare una tabella dati, dovremmo capire il dc.dataTableclasse e i suoi metodi. Utilizza un mixin per ottenere la funzionalità di base del disegno di un grafico con tabella dati, definito di seguito
- dc.baseMixin
Il dc.dataTable ottiene tutti i metodi di questo mixin e ha i propri metodi per disegnare la tabella dei dati, che sono spiegati come segue.
beginSlice ([slice])
Questo metodo viene utilizzato per ottenere o impostare l'indice della sezione iniziale. Questo metodo è utile quando si implementa l'impaginazione.
Allo stesso modo, puoi eseguire anche la funzione endSlice ().
colonne ([colonne])
Questo metodo viene utilizzato per ottenere o impostare le funzioni della colonna. Utilizza il metodo seguente per specificare le colonne da visualizzare.
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; }
]);Qui, d rappresenta una riga nel set di dati. Possiamo usare HTML per visualizzare le colonne nella tabella dei dati.
gruppo (groupFunction)
Questo metodo viene utilizzato per eseguire la funzione di gruppo per la tabella dati.
ordine ([ordine])
Viene utilizzato per ordinare la funzione di ordinamento. Se l'ordine è crescente, dimension () utilizzerà .bottom () per recuperare i dati, altrimenti utilizzerà dimension (). Top ().
Esempio di tabella dati
Creiamo una tabella dati in DC. Per fare ciò, dobbiamo seguire i passaggi indicati di seguito:
Passaggio 1: aggiungi stili
Aggiungiamo stili nel CSS utilizzando la codifica fornita di seguito:
.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; }Qui abbiamo assegnato gli stili per il grafico, il gruppo di tabelle e la colonna della griglia.
Passaggio 2: crea una variabile
Creiamo una variabile in DC come mostrato di seguito -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");Qui, abbiamo assegnato un id variabile barChart in riga, countChart id è mystats e tableChart id è mytable.
Passaggio 3: leggere i dati
Leggere i dati dal file people.csv come mostrato di seguito -
d3.csv("data/people.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. Qui abbiamo utilizzato lo stesso file people.csv, che è stato utilizzato nei nostri precedenti esempi di grafici.
Sembra come segue:
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
..........................................
..........................................Passaggio 4: impostare la dimensione
È possibile impostare la dimensione utilizzando la codifica fornita di seguito:
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Dopo che la dimensione è stata assegnata, raggruppa l'età utilizzando la codifica fornita di seguito:
var ageGroup = ageDimension.group().reduceCount();Passaggio 5: genera un grafico
Ora, genera un grafico a barre utilizzando la codifica fornita di seguito:
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);Qui,
- Abbiamo assegnato la larghezza del grafico a 400 e l'altezza a 200.
- Successivamente, abbiamo specificato l'intervallo di domini come [15,70].
- Abbiamo impostato l'etichetta dell'asse x come età e l'etichetta dell'asse y come conteggio.
- Abbiamo specificato le funzioni elasticY e X come true.
Passaggio 6: creare la tabella dei dati
Ora, crea la tabella dati usando la codifica fornita di seguito -
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Qui abbiamo specificato la dimensione dell'età e raggruppato i dati.
Passaggio 7: rendering della tabella
Ora, renderizza la griglia usando la codifica qui sotto -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();Qui, abbiamo ordinato le colonne utilizzando il DOB e ordinato i record.
Passaggio 8: esempio di lavoro
Il codice completo è il seguente. Crea una pagina web datatable.html e aggiungi le seguenti modifiche.
<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>Ora, richiedi il browser e vedrai la seguente risposta.
Dopo aver selezionato un'età compresa tra 20 e 30 anni, visualizza i record della tabella come mostrato nello screenshot qui sotto -
