D3.js - Grafici

Un grafico è uno spazio piatto bidimensionale rappresentato come un rettangolo. I grafici hanno uno spazio di coordinate in cui le coordinate x = 0 e y = 0 cadono in basso a sinistra. Secondo lo spazio delle coordinate cartesiane matematiche, i grafici hanno la coordinata X che cresce da sinistra a destra e la coordinata Y che cresce dal basso verso l'alto.

Quando parliamo di disegnare un cerchio con x = 30 e y = 30 coordinate, andiamo di 30 unità dal basso a sinistra a destra e poi di 30 unità verso l'alto.

Spazio delle coordinate SVG

SVG Coordinate Space funziona nello stesso modo in cui funziona uno spazio di coordinate di un grafico matematico, ad eccezione di due importanti caratteristiche:

Lo spazio delle coordinate SVG ha x = 0 e le coordinate y = 0 cadono in alto a sinistra.
Lo spazio delle coordinate SVG ha la coordinata Y che cresce dall'alto verso il basso.

Grafico spazio coordinate SVG

Quando parliamo di disegnare un cerchio con x = 30 e y = 30 coordinate nello spazio delle coordinate SVG, andiamo di 30 unità da in alto a sinistra a destra e poi scendiamo di 30 unità in su. È definito come segue.

var svgContainer = d3
   .select("body")
   .append("svg")
   .attr("width", 200)
   .attr("height", 200);

Considera l'elemento SVG come un grafico largo 200 unità e alto 200 unità. Ora sappiamo che le coordinate zero X e Y sono in alto a sinistra. Ora sappiamo anche che man mano che la coordinata Y cresce, si sposterà dall'alto verso il basso del nostro grafico. Puoi modellare gli elementi SVG come mostrato di seguito.

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

Esempio di grafico

Consideriamo un esempio del grafico a linee.

Line Graph- Un grafico a linee viene utilizzato per visualizzare il valore di qualcosa nel tempo. Confronta due variabili. Ogni variabile viene tracciata lungo un asse. Un grafico a linee ha un asse verticale e un asse orizzontale.

In questo grafico di esempio, possiamo prendere i record del file csv come Crescita della popolazione degli Stati indiani dal 2006 al 2017. Creiamo prima un data.csv per mostrare i record della popolazione.

Crea un nuovo file csv nella tua cartella D3 -

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Ora salva il file ed esegui i seguenti passaggi per disegnare un grafico a linee in D3. Esaminiamo ogni passaggio in dettaglio.

Step 1 - Adding styles - Aggiungiamo uno stile al file line classe utilizzando il codice fornito di seguito.

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

Step 2 - Define variables - Gli attributi SVG sono definiti di seguito.

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

Qui, la prima riga definisce i quattro margini, che circondano il blocco in cui è posizionato il grafico.

Step 3 - Define line - Disegna una nuova linea usando il d3.line() funzione, che è mostrata di seguito.

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

Qui, Year rappresenta i dati nei record dell'asse X e la popolazione si riferisce ai dati nell'asse Y.

Step 4 - Append SVG attributes - Aggiungi attributi SVG ed elementi di gruppo utilizzando il codice seguente.

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

Qui abbiamo aggiunto gli elementi del gruppo e applicato la trasformazione.

Step 5 - Read data - Ora possiamo leggere i dati dal nostro set di dati data.csv.

d3.csv("data.csv", function(error, data) {
   if (error) throw error;
}

Qui, data.csv non è presente, genera un errore.

Step 6 - Format data - Ora, formatta i dati utilizzando il codice seguente.

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

Questo codice precedente garantisce che tutti i valori estratti dal file csv siano impostati e formattati correttamente. Ogni riga è composta da due valori: un valore per "anno" e un altro valore per "popolazione". La funzione estrae i valori di "anno" e "popolazione" una riga alla volta.

Step 7 - Set scale range - Dopo la formattazione dei dati, è possibile impostare l'intervallo di scala per X e Y.

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 8 - Append path - Aggiungi percorso e dati come mostrato di seguito.

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

Step 9 - Add X-axis - Ora puoi aggiungere l'asse X usando il codice qui sotto.

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

Step 10 - Add Y-axis - Possiamo aggiungere l'asse Y al gruppo come mostrato di seguito.

svg.append("g")
   .call(d3.axisLeft(y));

Step 11 - Working Example- Il codice completo è fornito nel seguente blocco di codice. Crea una semplice pagina weblinegraphs.html e aggiungi le seguenti modifiche.

graph.html

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style> 
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
         // set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

         // define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
         // moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

         // Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
            // format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            // Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

            // Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

            // Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

Ora richiedi il browser e vedremo il seguente risultato.

↰ Previous page Next page ↱

D3.js - Grafici

Spazio delle coordinate SVG

Grafico spazio coordinate SVG

Esempio di grafico

Tutorial D3.js