DC.js - Introduzione a D3.js

D3.js è una libreria JavaScript utilizzata per creare visualizzazioni interattive nel browser. La libreria D3 ci consente di manipolare gli elementi di una pagina web nel contesto di un set di dati. Questi elementi possono essere HTML, SVG o elementi Canvas e possono essere introdotti, rimossi o modificati in base al contenuto del set di dati. È una libreria per la manipolazione di oggetti DOM. D3.js può essere un valido aiuto nell'esplorazione dei dati. Ti dà il controllo sulla rappresentazione dei tuoi dati e ti consente di aggiungere l'interattività dei dati.

D3.js è uno dei framework principali rispetto ad altre librerie. Questo è perché; funziona sul Web e sulla visualizzazione dei dati ed è di livello aziendale. Un altro motivo è la sua grande flessibilità, che consente agli sviluppatori di tutto il mondo di creare molti grafici avanzati. Inoltre, ha esteso notevolmente le sue funzionalità.

Comprendiamo i concetti di base di D3.js, che sono i seguenti:

• Selections
• Unione dati
• SVG
• Transition
• Animation
• API D3.js

Cerchiamo di comprendere ciascuno di questi concetti in dettaglio.

Selezioni

Le selezioni sono uno dei concetti chiave di D3.js. Si basa sul concetto di selettore CSS. Chi ha utilizzato e conosce già JQuery può facilmente comprendere le selezioni. Ci consente di selezionare il DOM in base ai selettori CSS e quindi fornire opzioni per modificare o aggiungere e rimuovere gli elementi del DOM.

Data Join

L'unione dei dati è un altro concetto importante in D3.js. Funziona insieme alle selezioni e ci consente di manipolare il documento HTML rispetto al nostro set di dati (una serie di valori numerici). Per impostazione predefinita, D3.js assegna al set di dati la massima priorità nei suoi metodi e ogni elemento nel set di dati corrisponde a un elemento HTML.

SVG

SVG sta per Scalable Vector Graphics. SVG è un formato di grafica vettoriale basato su XML. Fornisce opzioni per disegnare forme diverse come Linee, Rettangoli, Cerchi, Ellissi, ecc. Quindi, progettare visualizzazioni con SVG ti dà più potenza e flessibilità.

Trasformazione

SVG fornisce opzioni per trasformare un singolo elemento di forma SVG o un gruppo di elementi SVG. La trasformazione SVG supporta Traduci, Scala, Ruota e Inclina.

Transizione

La transizione è il processo di passaggio da uno stato all'altro di un elemento. D3.js fornisce un metodo Transition () per eseguire la transizione nella pagina HTML.

Animazione

D3.js supporta l'animazione attraverso la transizione. L'animazione può essere eseguita con un uso corretto della transizione. Le transizioni sono una forma limitata di animazione con fotogrammi chiave con solo due fotogrammi chiave:start e end. Il fotogramma chiave iniziale è in genere lo stato corrente del DOM e il fotogramma chiave finale è un insieme di attributi, stili e altre proprietà specificate. Le transizioni sono adatte per la transizione a una nuova vista senza un codice complicato che dipende dalla vista iniziale.

API D3.js

Cerchiamo di capire in breve alcuni dei metodi più importanti dell'API D3.js.

API per le collezioni

Una collezione è semplicemente un oggetto che raggruppa più elementi in una singola unità. È anche chiamato contenitore. Contiene oggetti, mappe, set e nidi.

API Paths

I tracciati vengono utilizzati per disegnare rettangoli, cerchi, ellissi, polilinee, poligoni, linee rette e curve. I tracciati SVG rappresentano il contorno di una forma che può essere accarezzata, riempita, utilizzata come tracciato di ritaglio o qualsiasi combinazione di tutti e tre.

API Axis

D3.js fornisce funzioni per disegnare assi. Un asse è composto da linee, segni di graduazione ed etichette. Un asse utilizza la scala, quindi a ciascun asse dovrà essere assegnata una scala con cui lavorare.

API di zoom

Lo zoom aiuta a ridimensionare i tuoi contenuti. È possibile concentrarsi su una particolare regione utilizzando l'approccio del clic e del trascinamento.

API con valori separati da delimitatori

Un delimitatore è una sequenza di uno o più caratteri utilizzata per specificare il confine tra regioni separate e indipendenti in testo normale o altri dati. Un delimitatore di campo è una sequenza di valori separati da virgole. In breve, i valori separati da delimitatori sono valori separati da virgola (CSV) o valori separati da tabulazione (TSV).