DC.js - Cuadrícula de datos

La cuadrícula de datos se utiliza para filtrar y mostrar los registros. Este capítulo explica en detalle la cuadrícula de datos.

Métodos de cuadrícula de datos

Antes de pasar a dibujar una cuadrícula de datos, debemos comprender el dc.dataGridclase y sus métodos. Esta clase usa un mixin para obtener la funcionalidad básica de dibujar un gráfico de cuadrícula de datos, que se define a continuación:

  • dc.baseMixin

El dc.dataGrid obtiene todos los métodos de este mixin y tiene sus propios métodos para dibujar la cuadrícula de datos, que se explica 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, puede realizar endSlice ().

grupo (función)

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

html ([html])

Este método se utiliza para obtener o configurar la función para generar un html dinámico.

orden orden])

Se utiliza para ordenar la función de orden.

tamaño ([tamaño])

Se utiliza para mostrar el número de elementos en la cuadrícula.

sortBy ([sortByFunction])

Este método se utiliza para obtener o establecer la función de clasificación. Podemos ordenar un campo en particular usando esta función. Por ejemplo: podemos ordenar por edad, que se define a continuación:

chart.sortBy(function(d) {
   return d.age;
});

Ejemplo de cuadrícula de datos

Realicemos una cuadrícula de datos en DC. Para hacer esto, debemos seguir los pasos que se detallan a continuación:

Paso 1: agregar estilos

Agreguemos estilos en CSS usando la siguiente codificación:

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

Aquí, hemos asignado los estilos del gráfico, la parte superior de la cuadrícula y el elemento de la cuadrícula.

Paso 2: crea una variable

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

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

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

Paso 3: lee los datos

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

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

Si no hay datos, devuelve un error. Ahora, asigne los datos a un filtro cruzado.

Aquí, usamos el mismo archivo people.csv, que se usó en nuestros ejemplos de gráficos anteriores. Se parece a lo que se muestra a continuación:

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 el gráfico de cuadrícula

Ahora, cree el gráfico de cuadrícula utilizando la codificación que se proporciona a continuación:

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

Paso 7: renderiza la cuadrícula

Ahora, renderice la cuadrícula usando la codificación que se proporciona a continuación:

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

Aquí, hemos ordenado el nombre usando la función html () y finalmente hemos renderizado el gráfico.

Paso 8: ejemplo de trabajo

El código completo es el siguiente. Crea una pagina webdatagrid.html y agregue los siguientes cambios.

<html>
   <head>
      <title>DC datagrid 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-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { 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 class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); 
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         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());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(100)
               .htmlGroup (function(d) { 
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               .html (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            gridChart.render();
         });
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

Inicialmente, el gráfico de cuadrícula se parece a la siguiente captura de pantalla.

Si selecciona una edad en particular entre 63 y 66, filtra los siguientes registros.