DC.js - Gráfico de Linha

Um gráfico de linha é usado para exibir informações como uma série de pontos de dados conectados por linhas retas. Um ponto de dados representa dois valores, um plotado ao longo do eixo horizontal e outro ao longo do eixo vertical. Por exemplo, a popularidade de itens alimentares pode ser desenhada como um gráfico de linha de forma que o item alimentar seja representado ao longo do eixo xe sua popularidade seja representada ao longo do eixo y. Este capítulo explica detalhadamente os gráficos de linhas.

Métodos de gráfico de linha

Antes de prosseguirmos para desenhar um gráfico de linha, devemos entender o dc.lineChartclasse e seus métodos. O dc.lineChart usa mixins para obter a funcionalidade básica de desenhar um gráfico. Os mixins usados por dc.lineChart são os seguintes -

dc.stackMixin
dc.coordinateGridMixin

O diagrama de classe completo do dc.lineChart é o seguinte -

O dc.lineChart obtém todos os métodos dos mixins especificados acima, bem como possui seus próprios métodos para desenhar o gráfico de linha. Eles são explicados a seguir.

dashStyle ([style])

Este método é usado para definir o estilo do traço para um gráfico de linha.

dotRadius ([radius])

Este método é usado para obter ou definir o raio (em PX) para pontos exibidos nos pontos de dados. É definido como segue -

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

interpolar ([i])

Este método é usado para obter ou definir o interpolador de uma linha.

renderArea ([area])

Este método é usado para obter ou definir a área de renderização.

renderDataPoints ([options])

Este método é usado para renderizar pontos individuais para cada ponto de dados.

tensão ([tensão])

Este método é usado para obter ou definir a tensão para as linhas desenhadas. Ele está no intervalo de 0 a 1.

xyTipsOn ([xyTipsOn])

Este método é usado para alterar o comportamento do mouse de um ponto de dados individual.

Desenhe um gráfico de linha

Vamos desenhar um gráfico de linha em DC. Para fazer isso, precisamos seguir as etapas fornecidas abaixo -

Etapa 1: definir uma variável

Vamos definir uma variável como mostrado abaixo -

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

Aqui, a função dc.linechart é mapeada com o contêiner tendo um id line.

Etapa 2: leia os dados

Leia os dados do people.csv arquivo -

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

Aqui, se usarmos o mesmo conjunto de dados people.csv, o arquivo de dados de amostra será 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 3: crie uma dimensão de idade

Agora, crie uma dimensão para a idade conforme mostrado abaixo -

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

Aqui, atribuímos a idade dos dados do Crossfilter.

O ~~ é um operador duplo NOT bit a bit. É usado como um substituto mais rápido para oMath.floor() função.

Agora, agrupe-o usando o reduceCount() função, que é definida abaixo -

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

Etapa 4: gerar um gráfico

Agora, gere um gráfico de linha usando a codificação fornecida abaixo -

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

Aqui,

A largura do gráfico é 800 e a altura é 300.
A função d3.scale.linear é usada para construir uma nova escala linear com o intervalo de domínio especificado [15, 70].
Em seguida, definimos o brushOn valor para falso.
Atribuímos o rótulo do eixo y como count e rótulo do eixo x como age.
Finalmente, agrupe a idade usando ageGroup.

Etapa 5: Exemplo de trabalho

A listagem completa do código é mostrada no bloco de código a seguir. Crie uma página da webline.html e adicione as seguintes alterações a ele.

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

Agora, solicite o navegador e veremos a seguinte resposta.