Share
Nella parte precedente di questa serie, abbiamo visto come iniziare a creare un grafico a più righe utilizzando la libreria JavaScript D3.js. In questo tutorial, lo porteremo al livello successivo facendo in modo che il grafico a più linee risponda ai dati in modo dinamico e aggiungeremo altre funzionalità man mano che il tutorial avanza.
Iniziamo clonando la prima parte del tutorial di GitHub.
git clone https://github.com/jay3dec/MultiLineChart_D3.git
Navigare verso MultiLineChart_D3 e sfoglia index.html, e dovresti avere un grafico a più linee basato sui dati di esempio.
Nel tutorial precedente, quando abbiamo creato xScale e yScale utilizzando Gamma e Dominio, abbiamo codificato il minimo e il massimo per il dominio. Per rendere il nostro grafico più flessibile, dobbiamo leggere i valori minimi e massimi per il dominio in modo dinamico dall'origine dati.
D3.js fornisce il d3.min e d3.max metodi per ottenere rispettivamente i valori minimo e massimo da una matrice. Faremo uso di queste funzioni per ottenere i valori minimi e massimi per il dominio.
Possiamo ottenere il valore minimo da una matrice come mostrato:
d3.min (data, function (d) return d.value;)
Allo stesso modo, per ottenere il valore massimo:
d3.max (data, function (d) return d.value;)
Basta sostituire i valori minimi e massimi in xScale dominio come mostrato:
xScale = d3.scale.linear (). range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([d3.min (dati, funzione (d) ritorno d.anno;), d3.max (dati, funzione (d) return d.year;)]),
Allo stesso modo, sostituire il yScale dominio:
yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([d3.min (dati, funzione (d) ritorno d.sale;), d3.max (dati, funzione (d) return d.sale;)]),
Salva tutte le modifiche e sfoglia index.html. Ora dovresti avere il grafico che funziona bene, come era prima. L'unica differenza è che raccoglie i valori massimi e minimi del dominio in modo dinamico.
Mantenere un singolo oggetto JSON per l'esempio renderebbe più semplice analizzare i dati e tracciarli sul grafico. Quindi unisci le due parti di dati di esempio in una singola stringa di dati JSON come mostrato di seguito:
var data = ["Client": "ABC", "vendita": "202", "anno": "2000", "Cliente": "ABC", "vendita": "215", "anno" : "2002", "Cliente": "ABC", "vendita": "179", "anno": "2004", "Cliente": "ABC", "vendita": "199", " anno ":" 2006 ", " Cliente ":" ABC "," vendita ":" 134 "," anno ":" 2008 ", " Cliente ":" ABC "," vendita ":" 176 " , "anno": "2010", "Cliente": "XYZ", "vendita": "100", "anno": "2000", "Cliente": "XYZ", "vendita": " 215 "," anno ":" 2002 ", " Cliente ":" XYZ "," vendita ":" 179 "," anno ":" 2004 ", " Cliente ":" XYZ "," vendita " : "199", "anno": "2006", "Cliente": "XYZ", "vendita": "134", "anno": "2008", "Cliente": "XYZ", " sale ":" 176 "," anno ":" 2013 "];
Ora modificheremo il nostro codice per rendere dinamicamente dinamico il nostro grafico secondo il set di dati di esempio e i suoi valori.
Successivamente divideremo e organizzeremo i dati in base a Cliente in modo che possiamo disegnare un grafico a linee per ciascuno Cliente nei dati. D3 fornisce un metodo chiamato d3.nest che aiuta a organizzare i dati in base a un particolare chiave campo. Useremo d3.nest per ordinare i dati in base a Cliente come mostrato:
var dataGroup = d3.nest () .key (funzione (d) return d.Client;) .entries (data);
Ecco come datagroup guarderei:
["chiave": "ABC", "valori": ["Cliente": "ABC", "vendita": "202", "anno": "2000", "Cliente": "ABC", "vendita": "215", "anno": "2002", "Cliente": "ABC", "vendita": "179", "anno": "2004", "Cliente": "ABC "," vendita ":" 199 "," anno ":" 2006 ", " Cliente ":" ABC "," vendita ":" 134 "," anno ":" 2008 ", " Cliente ": "ABC", "vendita": "176", "anno": "2010"], "chiave": "XYZ", "valori": ["Cliente": "XYZ", "vendita": "100", "anno": "2000", "Cliente": "XYZ", "vendita": "215", "anno": "2002", "Cliente": "XYZ", "vendita ":" 179 "," anno ":" 2004 ", " Cliente ":" XYZ "," vendita ":" 199 "," anno ":" 2006 ", " Cliente ":" XYZ ", "vendita": "134", "anno": "2008", "Cliente": "XYZ", "vendita": "176", "anno": "2013"]]
Quindi, rimuovere il svg codice del percorso linea per la creazione di linee che abbiamo codificato in precedenza.
Accentsconagua
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'green') .attr ('stroke-width', 2) .attr ('fill') , "nessuno"); vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill') , "nessuno");Invece andremo a scorrere il datagroup e creare un grafico a linee per ciascuno Cliente come mostrato:
dataGroup.forEach (funzione (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', 'blue') .attr (' stroke-width ', 2) .attr (' fill ',' none '););Salva le modifiche e prova a navigare index.html. Dovresti essere in grado di vedere il grafico a più linee come mostrato:
Aggiungiamo anche alcuni colori casuali alle linee del grafico. Per aggiungere colori casuali, utilizzeremo il metodo d3.hsl. Modifica il ictus attributo del grafico a linee come mostrato di seguito per ottenere colori casuali per le linee.
dataGroup.forEach (funzione (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', function (d, j) return "hsl (" + Math.random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('fill', 'none');) ;Salva le modifiche e sfoglia index.html. Dovresti vedere colori casuali per le linee sul grafico.
Successivamente, aggiungeremo leggende per il clienti nei dati di esempio. Una volta aggiunte le legende, allegheremo un evento click sulle legende che cambierà la visualizzazione dei rispettivi grafici a linee.
Innanzitutto, per aggiungere la legenda, dobbiamo modificare il file margine inferiore e margine superiore a 50 per accogliere le leggende.
var vis = d3.select ("visualizzazione #"), WIDTH = 1000, HEIGHT = 500, MARGINS = in alto: 50, a destra: 20, in basso: 50, a sinistra: 50,Durante l'iterazione del datagroup, aggiungeremo le legende per i grafici a linee corrispondenti. Aggiungere leggende è abbastanza semplice. Innanzitutto, definisci lo spazio della legenda in base al numero di client o grafici a linee che disegneremo:
lSpace = WIDTH / dataGroup.length;
Aggiungi un testo all'elemento svg con le coordinate xey durante l'iterazione del datagroup dopo la creazione della linea come mostrato:
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "black") .text (d. chiave);Abbiamo regolato la spaziatura della legenda (lSpace) In base al numero di leggende che dobbiamo mostrare, in modo che tutte le legende siano equidistanti l'una dall'altra. Abbiamo diviso la legenda di 2 in modo che sia allineata al centro nel suo spazio e sarà così come progredisce in avanti, come aggiungiamo (i * lSpace) alle leggende imminenti.
Salva tutte le modifiche e prova a navigare index.html e dovresti vedere le leggende sotto l'asse X..
Aggiungiamo un po 'di stile alle leggende per farle sembrare audaci. Aggiungi il seguente CSS a index.html:
.legend font-size: 14px; font-weight: bold;
Aggiungi la classe leggenda alla leggenda creata.
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "black") .attr ("class "," legenda ") .text (d.key);
Ora, aggiungiamo eventi di clic su ciascuna delle legende visualizzate per alternare la visualizzazione della riga corrispondente sul grafico a più linee.
Innanzitutto, avremo bisogno di aggiungere un id per ogni grafico a linee creato per alternare la visualizzazione.
.attr ('id', 'linea _' + d.key)Ecco come appare il codice di creazione della linea:
vis.append ('svg: path') .attr ('d', lineGen (d.values, xScale, yScale)) .attr ('stroke', funzione (d, j) return "hsl (" + Math. random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('id', 'line_' + d.key) .attr ('fill') , "nessuno");Successivamente, nella porzione di creazione della legenda, aggiungi il clic attributo:
.on ('click', function () alert (d.key);)Salva le modifiche e sfoglia index.html. Fai clic sulle legende e dovresti vedere i nomi delle legende come avvisi.
Successivamente, aggiungiamo il codice per attivare la visualizzazione della linea. Abbiamo semplicemente bisogno di controllare lo stato attuale del grafico a linee e attivare l'opacità per mostrare e nascondere la linea di conseguenza.
.on ('click', function () var active = d.attivo? false: true; var opacity = active? 0: 1; d3.select ("# line_" + d.key) .style ("opacità", opacità); d.active = active;)Salva le modifiche e prova a navigare index.html. Prova a fare clic sulle legende e la visualizzazione del grafico a linee corrispondente dovrebbe essere attivata.
In questo tutorial, abbiamo visto come rendere dinamico il nostro grafico a più linee. Abbiamo anche visto come creare eventi D3.js. Per informazioni dettagliate su vari altri metodi e API di D3.js, dai un'occhiata alla documentazione ufficiale.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
