DC.js - Tabela de Dados
A tabela de dados é usada para exibir os registros em um formato tabular. Ele lista os registros do conjunto de dados do filtro cruzado, conforme explicado neste capítulo em detalhes.
Métodos de tabela de dados
Antes de prosseguir para desenhar uma tabela de dados, devemos entender o dc.dataTableclasse e seus métodos. Ele usa um mixin para obter a funcionalidade básica de desenhar um gráfico de tabela de dados, que é definido abaixo -
- dc.baseMixin
O dc.dataTable obtém todos os métodos deste mixin e possui seus próprios métodos para desenhar a tabela de dados, que são explicados a seguir.
beginSlice ([slice])
Este método é usado para obter ou definir o índice da fatia inicial. Este método é útil ao implementar a paginação.
Da mesma forma, você também pode executar a função endSlice ().
colunas ([colunas])
Este método é usado para obter ou definir as funções da coluna. Ele usa o seguinte método para especificar as colunas a serem exibidas.
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; }
]);Aqui, d representa uma linha no conjunto de dados. Podemos usar HTML para exibir colunas na tabela de dados.
group (groupFunction)
Este método é usado para executar a função de grupo para a tabela de dados.
pedido ([pedido])
É usado para classificar a função de pedido. Se a ordem for crescente, então dimension () usará .bottom () para buscar os dados, caso contrário, usará dimension (). Top ().
Exemplo de tabela de dados
Vamos fazer uma tabela de dados em DC. Para fazer isso, precisamos seguir as etapas fornecidas abaixo -
Etapa 1: Adicionar estilos
Vamos adicionar estilos no CSS usando a codificação fornecida a seguir -
.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; }Aqui, atribuímos estilos para o gráfico, grupo de tabela e coluna de grade.
Etapa 2: crie uma variável
Vamos criar uma variável em DC como mostrado abaixo -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");Aqui, atribuímos um id de variável barChart em linha, countChart id é mystats e o id tableChart é mytable.
Etapa 3: leia os dados
Leia os dados do arquivo people.csv conforme mostrado abaixo -
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Se os dados não estiverem presentes, ele retornará um erro. Agora, atribua os dados a um filtro cruzado. Aqui, usamos o mesmo arquivo people.csv, que foi usado em nossos exemplos de gráficos anteriores.
Parece o seguinte -
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
..........................................
..........................................Etapa 4: definir a dimensão
Você pode definir a dimensão usando a codificação fornecida abaixo -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});Depois que a dimensão for atribuída, agrupe a idade usando a codificação fornecida abaixo -
var ageGroup = ageDimension.group().reduceCount();Etapa 5: gerar um gráfico
Agora, gere um gráfico de barras usando a codificação fornecida abaixo -
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);Aqui,
- Atribuímos a largura do gráfico como 400 e a altura como 200.
- Em seguida, especificamos o intervalo do domínio como [15,70].
- Definimos o rótulo do eixo x como idade e o rótulo do eixo y como contagem.
- Especificamos as funções elasticY e X como verdadeiras.
Etapa 6: Crie a tabela de dados
Agora, crie a tabela de dados usando a codificação fornecida abaixo -
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})Aqui, especificamos a dimensão da idade e agrupamos os dados.
Etapa 7: renderizar a tabela
Agora, renderize a grade usando a codificação abaixo -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();Aqui, classificamos as colunas usando o DOB e classificamos os registros.
Etapa 8: Exemplo de trabalho
O código completo é o seguinte. Crie uma página da web datatable.html e adicione as seguintes alterações a ela.
<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>Agora, solicite o navegador e você verá a seguinte resposta.
Após selecionar uma idade entre 20 e 30, ele exibe os registros da tabela conforme mostrado na imagem abaixo -
