DC.js - Gráfico de séries

Uma série é um conjunto de dados. Você pode traçar um gráfico com base nos dados. Este capítulo explica como desenhar um gráfico de série em detalhes.

Métodos de gráfico de série

Antes de continuar a desenhar um gráfico de série, devemos entender o dc.seriesChartclasse e seus métodos. O dc.seriesChart usa Mixins para obter a funcionalidade básica de desenho de um gráfico. O mixin usado pelo dc.seriesChart é -

dc.stackMixin

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

O dc.seriesChart obtém todos os métodos dos mixins especificados acima. Ele tem seus próprios métodos para desenhar o gráfico da série, que são explicados abaixo -

gráfico ([função])

Este método é usado para obter ou definir a função do gráfico.

seriesAccessor ([acessador])

É usado para obter ou definir a função de acesso para a série exibida.

seriesSort ([sortFunction])

Este método é usado para obter ou definir uma função para classificar a lista de séries, fornecendo valores de série.

valueSort ([sortFunction])

Este método é usado para obter ou definir uma função para classificar os valores de cada série.

Desenhe um gráfico de série

Vamos desenhar um gráfico de série em DC. Neste exemplo, vamos pegar um conjunto de dados denominado people_hw.csv. O arquivo de dados de amostra é o seguinte -

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

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

O arquivo de amostra acima contém muitos registros. Você pode baixar o arquivo clicando no link a seguir e salvá-lo em seu local de DC.

people_hw.csv

Agora, vamos seguir as etapas a seguir para desenhar um gráfico de série em DC.

Etapa 1: definir uma variável

Vamos definir a variável conforme mostrado abaixo -

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

Aqui, a função seriesChart é mapeada com a linha id.

Etapa 2: leia os dados

Leia os dados do arquivo people_hw.csv -

d3.csv("data/people_hw.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. Depois de obter os dados, podemos recuperá-los um por um e verificar o sexo usando a codificação fornecida abaixo -

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

Etapa 3: crie uma dimensão de idade

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

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

Aqui, atribuímos a dimensão e ela retorna o gênero e a altura. Agora, agrupe-o usando oreduceCount() função, que é definida abaixo -

var hwGroup = hwDimension.group().reduceCount();

Etapa 4: gerar um gráfico

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

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

Aqui,

A largura do gráfico é 800 e a altura é 600.
Usando o método d3.scale.linear (), especificamos o valor do domínio.
Usando a função seriesAccessor, ele exibe a série do datum.
O acessador de chave e valor retorna a chave e o valor da série.
A legenda pode ser usada para adicionar altura e largura.

Etapa 5: Exemplo de trabalho

A lista de códigos completa é a seguinte. Crie uma página da webline_series.html e adicione as seguintes alterações nele.

<html>
   <head>
      <title>Series chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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.seriesChart('#line');

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

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            chart.render();
         });
      </script>
   </body>
</html>

Agora, solicite o navegador e veremos a seguinte resposta.