Share
D3.js è una meravigliosa libreria JavaScript che viene utilizzata per la creazione di grafici interattivi e visivamente accattivanti. d3.js è l'acronimo di Data Driven Documents and uses HTML, SVG e CSS per eseguire la sua magia. Dai documenti ufficiali,
d3.js è una libreria JavaScript per manipolare documenti basati su dati. D3 ti aiuta a dare vita ai dati usando HTML, SVG e CSS. L'enfasi di D3 sugli standard web offre tutte le funzionalità dei browser moderni senza legarsi a un framework proprietario, combinando potenti componenti di visualizzazione e un approccio basato sui dati alla manipolazione del DOM..
Questo tutorial sarà un tutorial introduttivo su D3.js in cui ci concentreremo su alcune cose basilari per creare un grafico dinamico. Nel corso di questo tutorial, vedremo come creare un grafico a più righe utilizzando la libreria D3.js.
Se stai cercando una soluzione rapida, c'è una selezione di elementi grafici JavaScript su Envato Market.
A partire da pochi dollari, è un ottimo modo per implementare qualcosa in pochi minuti che richiederebbe molto più tempo per essere costruito da zero!
È possibile trovare script per creare qualsiasi cosa, da semplici grafici a linee a infografiche complesse.
Elementi grafici JavaScript sul mercato EnvatoPer iniziare a lavorare con D3.js, scarica e includi D3.js oppure puoi collegarti direttamente alla versione più recente di D3.js.
Inizieremo creando gli assi X e Y per il nostro grafico. Useremo alcuni dati di esempio per tracciare il grafico.
Ecco il codice HMTL bare-bones di base di index.html:
Per iniziare, richiediamo alcuni dati di esempio. Ecco i nostri dati di esempio:
var data = ["sale": "202", "anno": "2000", "vendita": "215", "anno": "2001", "vendita": "179", " year ":" 2002 ", " sale ":" 199 "," anno ":" 2003 ", " vendita ":" 134 "," anno ":" 2003 ", " vendita ":" 176 "," anno ":" 2010 "];
Scalable Vector Graphics (SVG) è un formato di immagine basato su XML per il disegno di grafica 2D che supporta l'interattività e l'animazione. Useremo un svg elemento per disegnare il nostro grafico. Aggiungi il svg elemento in index.html:
Successivamente, definiamo alcune costanti come larghezza, altezza, margine sinistro, ecc., che useremo durante la creazione del grafico. D3 fornisce un metodo chiamato d3.select per selezionare un elemento. Useremo d3.select per selezionare il svg elemento da index.html.
Accentsconagua
var vis = d3.select ("visualizzazione #"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, right: 20, bottom: 20, left: 50,Sulla base dei dati, abbiamo bisogno di creare scale per gli assi X e Y. Richiediamo il valore massimo e minimo dei dati disponibili per creare le scale sugli assi. D3 fornisce un metodo API chiamato d3.scale.linear che useremo per creare scale per gli assi.
d3.scale.linear usa due proprietà chiamate gamma e dominio per creare la scala. Gamma definisce l'area disponibile per il rendering del grafico, e Dominio definisce i valori massimi e minimi che dobbiamo tracciare nello spazio disponibile.
xScale = d3.scale.linear (). range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([2000,2010]),
Gamma è stato specificato nel codice sopra in modo che non sia affollato intorno ai bordi. I valori massimi e minimi per il dominio sono stati impostati in base ai dati di esempio utilizzati.
Allo stesso modo, definire il yScale come mostrato:
yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([134,215]),
Quindi, creiamo gli assi usando le scale definite nel codice precedente. D3 fornisce un metodo API chiamato d3.svg.axis per creare assi.
xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale);
Quindi, aggiungi l'asse X creato al svg contenitore come mostrato:
vis.append ("svg: g") .call (xAxis); Salva le modifiche e prova a navigare index.html. Dovresti avere qualcosa del tipo:
Come puoi vedere, l'asse X viene disegnato ma presenta alcuni problemi. Per prima cosa, dobbiamo posizionarlo verticalmente verso il basso. Mentre aggiungiamo l'asse X al contenitore SVG, possiamo usare la proprietà transform per spostare l'asse verso il basso. Useremo tradurre trasformare per spostare l'asse in base alle coordinate. Dato che abbiamo bisogno di spostare l'asse X solo verso il basso, forniremo le coordinate di trasformazione per l'asse X come 0 e l'asse Y appena sopra il margine.
vis.append ("svg: g") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")") .call (xAxis);Ora, aggiungiamo l'asse Y. Aggiungere il seguente codice per aggiungere l'asse Y al contenitore SVG:
vis.append ("svg: g") .call (yAxis);Salva le modifiche e sfoglia index.html e dovresti avere entrambi gli assi come mostrato.
Come puoi vedere nella schermata sopra, il Asse Y. non è nella posizione corretta. Quindi, abbiamo bisogno di cambiare il orientamento del precedente asse Y mostrato a sinistra. Una volta che l'asse è allineato a sinistra, applicheremo la trasformazione D3 per posizionarla correttamente lungo l'asse X. Aggiungi il Oriente proprietà al asseY cambiare il suo orientamento.
yAxis = d3.svg.axis () .scale (yScale) .orient ("left");Applica D3 trasformare mentre provo ad aggiungere il Asse Y. al contenitore SVG:
vis.append ("svg: g") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis);Abbiamo mantenuto la coordinata y di translate come 0, poiché volevamo spostarla solo orizzontalmente. Salva le modifiche e sfoglia index.html. Dovresti vedere qualcosa come:
Per tracciare i dati di esempio nel nostro grafico, dobbiamo applicare il xScale e il yScale alle coordinate per trasformarle e tracciare una linea attraverso lo spazio di tracciamento. D3 fornisce un metodo API chiamato d3.svg.line () disegnare una linea. Quindi aggiungi il seguente codice:
var lineGen = d3.svg.line () .x (function (d) return xScale (d.year);) .y (funzione (d) return yScale (d.sale););
Come puoi vedere nel codice precedente, abbiamo specificato le coordinate x e y per la linea come da xScale e yScale definito in precedenza.
Successivamente, aggiungeremo un percorso di linea a svg e mappare i dati di esempio allo spazio di stampa usando il lineGen funzione. Specificheremo anche alcuni attributi per la linea come ictus colore, stroke-width, ecc., come mostrato di seguito:
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'green') .attr ('stroke-width', 2) .attr ('fill') , "nessuno");Salva le modifiche e sfoglia index.html. Dovresti avere il grafico a linee come mostrato:
Di default la linea avrà interpolazione lineare. Possiamo specificare l'interpolazione e aggiungere alcuni CSS agli assi per renderlo migliore.
var lineGen = d3.svg.line () .x (function (d) return xScale (d.year);) .y (function (d) return yScale (d.sale);) .interpolate (" base");Aggiungi il seguente CSS a index.html:
.percorso dell'asse riempimento: nessuno; tratto: # 777; shape-rendering: crispEdges; testo .axis font-family: Lato; dimensione del font: 13px;
Includi la classe per entrambi asseX e asseY:
vis.append ("svg: g") .attr ("classe", "asse") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")") .call ( asseX); vis.append ("svg: g") .attr ("classe", "asse") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis) ;Con base interpolazione e alcuni CSS, ecco come dovrebbe apparire:
Prendi in considerazione un altro set di dati campione come mostrato:
var data2 = ["sale": "152", "anno": "2000", "vendita": "189", "anno": "2002", "vendita": "179", " year ":" 2004 ", " sale ":" 199 "," anno ":" 2006 ", " vendita ":" 134 "," anno ":" 2008 ", " vendita ":" 176 "," anno ":" 2010 "];
Per semplicità, abbiamo considerato due diversi set di dati di esempio con lo stesso Asse X. valori. Al fine di tracciare quanto sopra mostrato data2 accanto dati, abbiamo semplicemente bisogno di aggiungere un altro percorso svg al svg elemento. L'unica differenza è che i dati passati in scala al lineGen funzione è data2. Ecco come dovrebbe apparire:
vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill') , "nessuno");Salva le modifiche e sfoglia index.html. Dovresti essere in grado di vedere il grafico a più linee come mostrato:
In questo tutorial, abbiamo visto come iniziare a creare un semplice grafico a più righe utilizzando D3.js. Nella prossima parte di questa serie, porteremo questo tutorial al livello successivo rendendo dinamico il grafico a più linee e aggiungeremo alcune funzionalità per rendere il grafico più interattivo.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
