DC.js: tabla de datos

La tabla de datos se utiliza para mostrar los registros en formato tabular. Enumera los registros de conjuntos de datos de filtros cruzados como se explica en detalle en este capítulo.

Métodos de tabla de datos

Antes de pasar a dibujar una tabla de datos, debemos comprender el dc.dataTableclase y sus métodos. Utiliza un mixin para obtener la funcionalidad básica de dibujar un gráfico de tabla de datos, que se define a continuación:

dc.baseMixin

El dc.dataTable obtiene todos los métodos de este mixin y tiene sus propios métodos para dibujar la tabla de datos, que se explican a continuación.

beginSlice ([slice])

Este método se utiliza para obtener o establecer el índice del segmento inicial. Este método es útil al implementar la paginación.

Del mismo modo, también puede realizar la función endSlice ().

columnas ([columnas])

Este método se utiliza para obtener o configurar las funciones de columna. Utiliza el siguiente método para especificar las columnas que se mostrarán.

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; }
]);

Aquí, d representa una fila en el conjunto de datos. Podemos usar HTML para mostrar columnas en la tabla de datos.

grupo (función de grupo)

Este método se utiliza para realizar la función de grupo para la tabla de datos.

orden orden])

Se utiliza para ordenar la función de orden. Si el orden es ascendente, la dimensión () usará .bottom () para recuperar los datos; de lo contrario, usará dimensión (). Top ().

Ejemplo de tabla de datos

Hagamos una tabla de datos en DC. Para hacer esto, debemos seguir los pasos que se detallan a continuación:

Paso 1: agregar estilos

Agreguemos estilos en el CSS usando la codificación que se proporciona a continuación:

.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; }

Aquí, hemos asignado estilos para el gráfico, el grupo de tablas y la columna de la cuadrícula.

Paso 2: crea una variable

Creemos una variable en DC como se muestra a continuación:

var barChart = dc.barChart('#line'); // 
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");

Aquí, hemos asignado un id de variable barChart en línea, el id de countChart es mystats y el id de tableChart es mytable.

Paso 3: lee los datos

Lea los datos del archivo people.csv como se muestra a continuación:

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Si los datos no están presentes, devuelve un error. Ahora, asigne los datos a un filtro cruzado. Aquí, hemos utilizado el mismo archivo people.csv, que se utilizó en nuestros ejemplos de gráficos anteriores.

Tiene el siguiente aspecto:

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

..........................................
..........................................

Paso 4: establece la dimensión

Puede establecer la dimensión utilizando la codificación que se proporciona a continuación:

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Después de que se haya asignado la dimensión, agrupe la edad utilizando el código que se proporciona a continuación:

var ageGroup = ageDimension.group().reduceCount();

Paso 5: genera un gráfico

Ahora, genere un gráfico de barras utilizando la codificación que se proporciona a continuación:

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

Aquí,

Hemos asignado el ancho del gráfico como 400 y el alto como 200.
A continuación, hemos especificado el rango de dominio como [15,70].
Hemos establecido la etiqueta del eje x como edad y la etiqueta del eje y como recuento.
Hemos especificado la función elasticY y X como verdaderas.

Paso 6: crea la tabla de datos

Ahora, cree la tabla de datos utilizando la codificación que se proporciona a continuación:

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

tableChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

Aquí, hemos especificado la dimensión de edad y agrupamos los datos.

Paso 7: renderiza la tabla

Ahora, renderice la cuadrícula usando la siguiente codificación:

.size(Infinity)
   .columns(['name', 'DOB'])
   .sortBy(function (d) {
      return d.value;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
tableChart.render();

Aquí, hemos ordenado las columnas usando el DOB y ordenamos los registros.

Paso 8: ejemplo de trabajo

El código completo es el siguiente. Cree una página web datatable.html y agregue los siguientes cambios.

<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>

Ahora, solicite el navegador y verá la siguiente respuesta.

Después de seleccionar una edad entre 20 y 30, muestra los registros de la tabla como se muestra en la captura de pantalla a continuación:

↰ Previous page Next page ↱