DC.js - Gráfico de líneas

Un gráfico de líneas se utiliza para mostrar información como una serie de puntos de datos conectados por líneas rectas. Un punto de datos representa dos valores, uno trazado a lo largo del eje horizontal y otro a lo largo del eje vertical. Por ejemplo, la popularidad de los alimentos se puede dibujar como un gráfico de líneas de tal manera que el alimento se represente a lo largo del eje xy su popularidad se represente a lo largo del eje y. Este capítulo explica en detalle los gráficos de líneas.

Métodos de gráfico de líneas

Antes de pasar a dibujar un gráfico de líneas, debemos comprender el dc.lineChartclase y sus métodos. El dc.lineChart usa mixins para obtener la funcionalidad básica de dibujar un gráfico. Los mixins utilizados por dc.lineChart son los siguientes:

dc.stackMixin
dc.coordinateGridMixin

El diagrama de clases completo de dc.lineChart es el siguiente:

El dc.lineChart obtiene todos los métodos de los mixins especificados anteriormente y tiene sus propios métodos para dibujar el gráfico de líneas. Se explican a continuación.

dashStyle ([estilo])

Este método se utiliza para establecer el estilo de guión de un gráfico de líneas.

dotRadius ([radio])

Este método se utiliza para obtener o establecer el radio (en PX) de los puntos que se muestran en los puntos de datos. Se define de la siguiente manera:

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

interpolar ([i])

Este método se utiliza para obtener o configurar el interpolador de una línea.

renderArea ([área])

Este método se utiliza para obtener o establecer el área de renderizado.

renderDataPoints ([opciones])

Este método se utiliza para representar puntos individuales para cada punto de datos.

tensión ([tensión])

Este método se utiliza para obtener o establecer la tensión de las líneas dibujadas. Está en el rango de 0 a 1.

xyTipsOn ([xyTipsOn])

Este método se utiliza para cambiar el comportamiento del mouse de un punto de datos individual.

Dibujar un gráfico de líneas

Dibujemos un gráfico de líneas en DC. Para hacer esto, debemos seguir los pasos que se detallan a continuación:

Paso 1: definir una variable

Definamos una variable como se muestra a continuación:

var chart = dc.lineChart('#line');

Aquí, la función dc.linechart se asigna con el contenedor que tiene un id line.

Paso 2: lee los datos

Leer datos del people.csv archivo -

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

Aquí, si usamos el mismo conjunto de datos people.csv, el archivo de datos de muestra será el siguiente:

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 3: crea una dimensión de edad

Ahora, cree una dimensión para la edad como se muestra a continuación:

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

Aquí, asignamos la edad de los datos del filtro cruzado.

El ~~ es un operador NO bit a bit doble. Se utiliza como un sustituto más rápido de laMath.floor() función.

Ahora, agrúpelo usando el reduceCount() función, que se define a continuación:

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

Paso 4: genera un gráfico

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

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Aquí,

El ancho del gráfico es 800 y la altura 300.
La función d3.scale.linear se utiliza para construir una nueva escala lineal con el rango de dominio especificado [15, 70].
A continuación, configuramos el brushOn valor a falso.
Asignamos la etiqueta del eje y como count y etiqueta del eje x como age.
Finalmente, agrupe la edad usando ageGroup.

Paso 5: ejemplo de trabajo

La lista completa de códigos se muestra en el siguiente bloque de código. Crea una pagina webline.html y agregue los siguientes cambios.

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.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.lineChart('#line');

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

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

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱