DC.js - Grafico a linee

Un grafico a linee viene utilizzato per visualizzare le informazioni come una serie di punti dati collegati da linee rette. Un punto dati rappresenta due valori, uno tracciato lungo l'asse orizzontale e un altro lungo l'asse verticale. Ad esempio, la popolarità degli alimenti può essere disegnata come un grafico a linee in modo tale che l'elemento alimentare sia rappresentato lungo l'asse xe la sua popolarità sia rappresentata lungo l'asse y. Questo capitolo spiega in dettaglio i grafici a linee.

Metodi del grafico a linee

Prima di passare a disegnare un grafico a linee, dovremmo capire il dc.lineChartclasse e i suoi metodi. Il dc.lineChart utilizza i mixin per ottenere le funzionalità di base per disegnare un grafico. I mixin utilizzati da dc.lineChart sono i seguenti:

dc.stackMixin
dc.coordinateGridMixin

Il diagramma delle classi completo di dc.lineChart è il seguente:

Il dc.lineChart ottiene tutti i metodi dei mixin sopra specificati e ha i suoi metodi per disegnare il grafico a linee. Sono spiegati come segue.

dashStyle ([style])

Questo metodo viene utilizzato per impostare lo stile del trattino per un grafico a linee.

dotRadius ([raggio])

Questo metodo viene utilizzato per ottenere o impostare il raggio (in PX) per i punti visualizzati sui punti dati. È definito come segue:

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

interpolare ([i])

Questo metodo viene utilizzato per ottenere o impostare l'interpolatore per una linea.

renderArea ([area])

Questo metodo viene utilizzato per ottenere o impostare l'area di rendering.

renderDataPoints ([opzioni])

Questo metodo viene utilizzato per eseguire il rendering di singoli punti per ogni punto dati.

tensione ([tensione])

Questo metodo viene utilizzato per ottenere o impostare la tensione per le linee tracciate. È compreso tra 0 e 1.

xyTipsOn ([xyTipsOn])

Questo metodo viene utilizzato per modificare il comportamento del mouse di un singolo punto dati.

Disegna un grafico a linee

Disegniamo un grafico a linee in DC. Per fare ciò, dobbiamo seguire i passaggi indicati di seguito:

Passaggio 1: definire una variabile

Definiamo una variabile come mostrato di seguito:

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

Qui, la funzione dc.linechart è mappata con il contenitore che ha un'estensione id line.

Passaggio 2: leggere i dati

Leggi i dati da people.csv file -

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

Qui, se abbiamo utilizzato lo stesso set di dati people.csv, il file di dati di esempio sarà il seguente:

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

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

Passaggio 3: crea una dimensione età

Ora, crea la dimensione per l'età come mostrato di seguito -

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

Qui, abbiamo assegnato l'età dai dati Crossfilter.

~~ è un doppio operatore NOT bit per bit. È usato come sostituto più veloce perMath.floor() funzione.

Ora, raggruppalo usando il file reduceCount() funzione, che è definita di seguito -

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

Passaggio 4: genera un grafico

Ora, genera un grafico a linee utilizzando la codifica fornita di seguito:

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

Qui,

La larghezza del grafico è 800 e l'altezza è 300.
La funzione d3.scale.linear viene utilizzata per costruire una nuova scala lineare con l'intervallo di dominio specificato [15, 70].
Successivamente, impostiamo il file brushOn valore su falso.
Assegniamo l'etichetta dell'asse y come count e l'etichetta dell'asse x come age.
Infine, raggruppa l'età utilizzando ageGroup.

Passaggio 5: esempio di lavoro

L'elenco completo del codice è mostrato nel seguente blocco di codice. Crea una pagina webline.html e aggiungi le seguenti modifiche.

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

Ora, richiedi il browser e vedremo la seguente risposta.