D3.js - Guida rapida

La visualizzazione dei dati è la presentazione dei dati in un formato pittorico o grafico. L'obiettivo principale della visualizzazione dei dati è comunicare le informazioni in modo chiaro ed efficiente tramite grafici statistici, grafici e grafici delle informazioni.

La visualizzazione dei dati ci aiuta a comunicare le nostre intuizioni in modo rapido ed efficace. Qualsiasi tipo di dato, rappresentato da una visualizzazione, consente agli utenti di confrontare i dati, generare report analitici, comprendere i modelli e quindi li aiuta a prendere la decisione. Le visualizzazioni dei dati possono essere interattive, in modo che gli utenti analizzino dati specifici nel grafico. Bene, le visualizzazioni dei dati possono essere sviluppate e integrate in siti Web regolari e persino applicazioni mobili utilizzando diversi framework JavaScript.

Cos'è D3.js?

D3.js è una libreria JavaScript utilizzata per creare visualizzazioni interattive nel browser. La libreria D3.js ci consente di manipolare gli elementi di una pagina web nel contesto di un set di dati. Questi elementi possono essereHTML, SVG, o Canvas elementse può essere introdotto, rimosso o modificato in base al contenuto del set di dati. È una libreria per manipolare gli 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 interattività.

Perché abbiamo bisogno di D3.js?

D3.js è uno dei framework principali se confrontato con altre librerie. Questo perché funziona sul web e le sue visualizzazioni di dati sono per eccellenza. Un altro motivo per cui ha funzionato così bene è dovuto alla sua flessibilità. Poiché funziona perfettamente con le tecnologie Web esistenti e può manipolare qualsiasi parte del modello di oggetti del documento, è flessibile come ilClient Side Web Technology Stack(HTML, CSS e SVG). Ha un ottimo supporto per la comunità ed è più facile da imparare.

Caratteristiche di D3.js

D3.js è uno dei migliori framework di visualizzazione dei dati e può essere utilizzato per generare visualizzazioni semplici e complesse insieme all'interazione dell'utente e agli effetti di transizione. Alcune delle sue caratteristiche salienti sono elencate di seguito:

  • Estremamente flessibile.
  • Facile da usare e veloce.
  • Supporta set di dati di grandi dimensioni.
  • Programmazione dichiarativa.
  • Riutilizzabilità del codice.
  • Ha un'ampia varietà di funzioni che generano curve.
  • Associa i dati a un elemento o gruppo di elementi nella pagina html.

Vantaggi di D3.js

D3.js è un progetto open source e funziona senza alcun plugin. Richiede molto meno codice e offre i seguenti vantaggi:

  • Ottima visualizzazione dei dati.

  • È modulare. Puoi scaricare una piccola parte di D3.js, che desideri utilizzare. Non è necessario caricare ogni volta l'intera libreria.

  • Facile da costruire un componente grafico.

  • Manipolazione DOM.

Nel prossimo capitolo capiremo come installare D3.js sul nostro sistema.

In questo capitolo impareremo come configurare l'ambiente di sviluppo D3.js. Prima di iniziare, abbiamo bisogno dei seguenti componenti:

  • Libreria D3.js
  • Editor
  • programma di navigazione in rete
  • server web

Esaminiamo i passaggi uno per uno in dettaglio.

Libreria D3.js

Dobbiamo includere la libreria D3.js nella tua pagina web HTML per poter utilizzare D3.js per creare la visualizzazione dei dati. Possiamo farlo nei seguenti due modi:

  • Includi la libreria D3.js dalla cartella del tuo progetto.
  • Include la libreria D3.js da CDN (Content Delivery Network).

Scarica la libreria D3.js

D3.js è una libreria open-source e il codice sorgente della libreria è disponibile gratuitamente sul web all'indirizzo https://d3js.org/sito web. Visitare il sito Web D3.js e scaricare l'ultima versione di D3.js (d3.zip). Al momento, l'ultima versione è 4.6.0.

Al termine del download, decomprimere il file e cercare d3.min.js. Questa è la versione ridotta del codice sorgente di D3.js. Copia il file d3.min.js e incollalo nella cartella principale del tuo progetto o in qualsiasi altra cartella, dove desideri conservare tutti i file della libreria. Includi il file d3.min.js nella tua pagina HTML come mostrato di seguito.

Example - Consideriamo il seguente esempio.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js è un codice JavaScript, quindi dovremmo scrivere tutto il nostro codice D3 all'interno del tag "script". Potrebbe essere necessario manipolare gli elementi DOM esistenti, quindi è consigliabile scrivere il codice D3 appena prima della fine del tag "body".

Include la libreria D3 da CDN

Possiamo utilizzare la libreria D3.js collegandola direttamente alla nostra pagina HTML dalla Content Delivery Network (CDN). CDN è una rete di server in cui i file sono ospitati e vengono consegnati a un utente in base alla sua posizione geografica. Se utilizziamo il CDN, non è necessario scaricare il codice sorgente.

Includere la libreria D3.js utilizzando l'URL CDN https://d3js.org/d3.v4.min.js nella nostra pagina come mostrato di seguito.

Example - Consideriamo il seguente esempio.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Editor D3.js

Avremo bisogno di un editor per iniziare a scrivere il tuo codice. Ci sono alcuni ottimi IDE (Integrated Development Environment) con supporto per JavaScript come -

  • Codice di Visual Studio
  • WebStorm
  • Eclipse
  • Testo sublime

Questi IDE forniscono il completamento del codice intelligente e supportano alcuni dei moderni framework JavaScript. Se non hai un IDE elegante, puoi sempre utilizzare un editor di base come Blocco note, VI, ecc.

Programma di navigazione in rete

D3.js funziona su tutti i browser tranne IE8 e versioni precedenti.

Server web

La maggior parte dei browser serve file HTML locali direttamente dal file system locale. Tuttavia, ci sono alcune limitazioni quando si tratta di caricare file di dati esterni. Negli ultimi capitoli di questo tutorial, caricheremo i dati da file esterni comeCSV e JSON. Pertanto, sarà più facile per noi se configuriamo il server web fin dall'inizio.

Puoi utilizzare qualsiasi server web con cui sei a tuo agio, ad esempio IIS, Apache, ecc.

Visualizzazione della tua pagina

Nella maggior parte dei casi, possiamo semplicemente aprire il tuo file HTML in un browser web per visualizzarlo. Tuttavia, quando si caricano origini dati esterne, è più affidabile eseguire un server Web locale e visualizzare la pagina dal server(http://localhost:8080).

D3.js è una libreria JavaScript open source per -

  • Manipolazione basata sui dati del DOM (Document Object Model).
  • Lavorare con dati e forme.
  • Disposizione di elementi visivi per dati lineari, gerarchici, di rete e geografici.
  • Abilitazione di transizioni fluide tra gli stati dell'interfaccia utente (UI).
  • Abilitazione di un'interazione utente efficace.

Standard web

Prima di poter iniziare a utilizzare D3.js per creare visualizzazioni, dobbiamo acquisire familiarità con gli standard web. I seguenti standard web sono ampiamente utilizzati in D3.js.

  • HyperText Markup Language (HTML)
  • Document Object Model (DOM)
  • Fogli di stile CSS (Cascading Style Sheets)
  • Grafica vettoriale scalabile (SVG)
  • JavaScript

Esaminiamo ciascuno di questi standard web uno per uno in dettaglio.

HyperText Markup Language (HTML)

Come sappiamo, l'HTML viene utilizzato per strutturare il contenuto della pagina web. Viene memorizzato in un file di testo con estensione ".html".

Example - Un tipico esempio HTML essenziale è simile a questo

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

Document Object Model (DOM)

Quando una pagina HTML viene caricata da un browser, viene convertita in una struttura gerarchica. Ogni tag in HTML viene convertito in un elemento / oggetto nel DOM con una gerarchia padre-figlio. Rende il nostro HTML strutturato in modo più logico. Una volta formato il DOM, diventa più facile manipolare (aggiungere / modificare / rimuovere) gli elementi sulla pagina.

Facci capire il DOM utilizzando il seguente documento HTML:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Il modello a oggetti del documento del documento HTML di cui sopra è il seguente,

Fogli di stile CSS (Cascading Style Sheets)

Mentre l'HTML fornisce una struttura alla pagina web, gli stili CSS rendono la pagina web più piacevole da guardare. CSS è un fileStyle Sheet Languageusato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi dialetti XML come SVG o XHTML). CSS descrive come gli elementi dovrebbero essere visualizzati su una pagina web.

Grafica vettoriale scalabile (SVG)

SVG è un modo per eseguire il rendering delle immagini sulla pagina web. SVG non è un'immagine diretta, ma è solo un modo per creare immagini utilizzando il testo. Come suggerisce il nome, è un fileScalable Vector. Si ridimensiona in base alle dimensioni del browser, quindi il ridimensionamento del browser non distorce l'immagine. Tutti i browser supportano SVG tranne IE 8 e versioni precedenti. Le visualizzazioni dei dati sono rappresentazioni visive ed è conveniente utilizzare SVG per eseguire il rendering delle visualizzazioni utilizzando D3.js.

Pensa a SVG come a una tela su cui possiamo dipingere forme diverse. Quindi, per cominciare, creiamo un tag SVG -

<svg width = "500" height = "500"></<svg>

La misura predefinita per SVG è pixel, quindi non è necessario specificare se la nostra unità è pixel. Ora, se vogliamo disegnare un rettangolo, possiamo disegnarlo usando il codice qui sotto -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

Possiamo disegnare altre forme in SVG come: Linea, Cerchio, Ellisse, Testo e Percorso.

Proprio come lo stile degli elementi HTML, lo stile degli elementi SVG è semplice. Impostiamo il colore di sfondo del rettangolo sul giallo. Per questo, dobbiamo aggiungere un attributo "riempimento" e specificare il valore in giallo come mostrato di seguito -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript è un linguaggio di scripting lato client a bassa tipizzazione che viene eseguito nel browser dell'utente. JavaScript interagisce con gli elementi HTML (elementi DOM) per rendere interattiva l'interfaccia utente web. JavaScript implementa ilECMAScript Standards, che include funzionalità di base basate sulle specifiche ECMA-262 e altre funzionalità non basate sugli standard ECMAScript. La conoscenza di JavaScript è un prerequisito per D3.js.

Le selezioni sono uno dei concetti fondamentali di D3.js. Si basa sui selettori CSS. Ci permette di selezionare uno o più elementi in una pagina web. Inoltre, ci consente di modificare, aggiungere o rimuovere elementi in relazione al set di dati predefinito. In questo capitolo vedremo come utilizzare le selezioni per creare visualizzazioni di dati.

D3.js aiuta a selezionare gli elementi dalla pagina HTML utilizzando i seguenti due metodi:

  • select()- Seleziona un solo elemento DOM facendo corrispondere il selettore CSS specificato. Se sono presenti più elementi per il selettore CSS specificato, seleziona solo il primo.

  • selectAll()- Seleziona tutti gli elementi DOM abbinando il selettore CSS specificato. Se hai familiarità con la selezione di elementi con jQuery, i selettori di D3.js sono quasi gli stessi.

Esaminiamo in dettaglio ciascuno dei metodi.

Il metodo select ()

Il metodo select () seleziona l'elemento HTML in base ai selettori CSS. Nei selettori CSS, puoi definire e accedere agli elementi HTML nei tre modi seguenti:

  • Tag di un elemento HTML (ad es. Div, h1, p, span, ecc.,)
  • Nome della classe di un elemento HTML
  • ID di un elemento HTML

Vediamolo in azione con esempi.

Selezione per tag

Puoi selezionare elementi HTML usando il suo TAG. La seguente sintassi viene utilizzata per selezionare gli elementi del tag "div",

d3.select(“div”)

Example - Crea una pagina "select_by_tag.html" e aggiungi le seguenti modifiche,

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, sullo schermo verrà visualizzato il seguente output:

Selezione in base al nome della classe

Gli elementi HTML con stili utilizzando le classi CSS possono essere selezionati utilizzando la seguente sintassi.

d3.select(“.<class name>”)

Crea una pagina web "select_by_class.html" e aggiungi le seguenti modifiche:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite il browser, sullo schermo verrà visualizzato il seguente output:

Selezione per ID

Ogni elemento in una pagina HTML dovrebbe avere un ID univoco. Possiamo utilizzare questo ID univoco di un elemento per accedervi utilizzando il metodo select () come specificato di seguito.

d3.select(“#<id of an element>”)

Crea una pagina web "select_by_id.html" e aggiungi le seguenti modifiche.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, sullo schermo verrà visualizzato il seguente output.

Aggiunta di elementi DOM

La selezione D3.js fornisce l'estensione append() e il text()metodi per aggiungere nuovi elementi ai documenti HTML esistenti. Questa sezione spiega in dettaglio l'aggiunta di elementi DOM.

Il metodo append ()

Il metodo append () aggiunge un nuovo elemento come ultimo figlio dell'elemento nella selezione corrente. Questo metodo può anche modificare lo stile degli elementi, i loro attributi, proprietà, HTML e contenuto del testo.

Crea una pagina web "select_and_append.html" e aggiungi le seguenti modifiche:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, è possibile visualizzare il seguente output sullo schermo,

Qui, il metodo append () aggiunge un nuovo intervallo di tag all'interno del tag div come mostrato di seguito:

<div class = "myclass">
   Hello World!<span></span>
</div>

Il metodo text ()

Il metodo text () viene utilizzato per impostare il contenuto degli elementi selezionati / aggiunti. Cambiamo l'esempio sopra e aggiungiamo il metodo text () come mostrato di seguito.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Ora aggiorna la pagina web e vedrai la seguente risposta.

Qui, lo script precedente esegue un'operazione di concatenamento. D3.js utilizza in modo intelligente una tecnica chiamatachain syntax, che potresti riconoscere da jQuery. Concatenando metodi insieme a punti, è possibile eseguire diverse azioni in una singola riga di codice. E 'facile e veloce. Lo stesso script può accedere anche senza la sintassi della catena come mostrato di seguito.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Modifica di elementi

D3.js fornisce vari metodi, html(), attr() e style()per modificare il contenuto e lo stile degli elementi selezionati. Vediamo come utilizzare i metodi di modifica in questo capitolo.

Il metodo html ()

Il metodo html () viene utilizzato per impostare il contenuto html degli elementi selezionati / aggiunti.

Crea una pagina web "select_and_add_html.html" e aggiungi il codice seguente.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, sullo schermo verrà visualizzato il seguente output.

Il metodo attr ()

Il metodo attr () viene utilizzato per aggiungere o aggiornare l'attributo degli elementi selezionati. Crea una pagina web "select_and_modify.html" e aggiungi il codice seguente.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, sullo schermo verrà visualizzato il seguente output.

Il metodo style ()

Il metodo style () viene utilizzato per impostare la proprietà di stile degli elementi selezionati. Crea una pagina web "select_and_style.html" e aggiungi il codice seguente.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, sullo schermo verrà visualizzato il seguente output.

Il metodo classed ()

Il metodo classed () viene utilizzato esclusivamente per impostare l'attributo "class" di un elemento HTML. Poiché un singolo elemento HTML può avere più classi; dobbiamo stare attenti durante l'assegnazione di una classe a un elemento HTML. Questo metodo sa come gestire una o più classi su un elemento e sarà performante.

  • Add class- Per aggiungere una classe, il secondo parametro del metodo classificato deve essere impostato su true. È definito di seguito:

d3.select(".myclass").classed("myanotherclass", true);
  • Remove class- Per rimuovere una classe, il secondo parametro del metodo classificato deve essere impostato su false. È definito di seguito:

d3.select(".myclass").classed("myanotherclass", false);
  • Check class- Per verificare l'esistenza di una classe, tralascia il secondo parametro e passa il nome della classe che stai interrogando. Questo restituirà vero, se esiste, falso, se non lo è.

d3.select(".myclass").classed("myanotherclass");

Questo restituirà vero, se qualsiasi elemento nella selezione ha la classe. Usod3.select per la selezione di un singolo elemento.

  • Toggle class - Per capovolgere una classe nello stato opposto - rimuoverla se esiste già, aggiungerla se non esiste ancora - puoi eseguire una delle seguenti operazioni.

    Per un singolo elemento, il codice potrebbe apparire come mostrato di seguito:

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

Il metodo selectAll ()

Il metodo selectAll () viene utilizzato per selezionare più elementi nel documento HTML. Il metodo select seleziona il primo elemento, ma il metodo selectAll seleziona tutti gli elementi che corrispondono alla stringa del selettore specifica. Nel caso in cui la selezione non corrisponda a nessuno, restituisce una selezione vuota. Possiamo concatenare tutti i metodi di modifica di accodamento,append(), html(), text(), attr(), style(), classed(),ecc., anche nel metodo selectAll (). In questo caso, i metodi influenzeranno tutti gli elementi corrispondenti. Facci capire creando una nuova pagina web "select_multiple.html" e aggiungi il seguente script:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Richiedendo la pagina web tramite browser, sullo schermo verrà visualizzato il seguente output.

Qui, il metodo attr () si applica a entrambi div e h2 tag e il colore del testo in entrambi i tag diventa rosso.

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 dà al set di dati la massima priorità nei suoi metodi e ogni elemento nel set di dati corrisponde a un elemento HTML. Questo capitolo spiega i join di dati in dettaglio.

Cos'è un data join?

L'unione dei dati ci consente di inserire, modificare e rimuovere elementi (elemento HTML e elementi SVG incorporati) in base al set di dati nel documento HTML esistente. Per impostazione predefinita, ogni elemento di dati nel set di dati corrisponde a un elemento (grafico) nel documento.

Man mano che il set di dati cambia, anche l'elemento corrispondente può essere manipolato facilmente. L'unione dei dati crea una stretta relazione tra i nostri dati e gli elementi grafici del documento. L'unione dei dati rende la manipolazione degli elementi basata sul set di dati un processo molto semplice e facile.

Come funziona Data Join?

Lo scopo principale del join dati è mappare gli elementi del documento esistente con il set di dati specificato. Crea una rappresentazione virtuale del documento rispetto al dato set di dati e fornisce metodi per lavorare con la rappresentazione virtuale. Consideriamo un semplice set di dati come mostrato di seguito.

[10, 20, 30, 25, 15]

Il set di dati ha cinque elementi e quindi può essere mappato a cinque elementi del documento. Cerchiamo di mapparlo al fileli elemento del seguente documento utilizzando il metodo selectAll () del selettore e il metodo data () di data join.

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

Codice D3.js

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

Ora ci sono cinque elementi virtuali nel documento. I primi due elementi virtuali sono i dueli elemento definito nel documento come mostrato di seguito.

1. li - 10
2. li - 20

Possiamo usare tutti i metodi di modifica degli elementi del selettore come attr(), style(), text(), ecc. per i primi due li come mostrato di seguito.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

La funzione nel metodo text () viene utilizzata per ottenere il file lielementi mappati dati. Qui,d rappresentano 10 per primo li elemento e 20 per il secondo li elemento.

I prossimi tre elementi possono essere mappati a qualsiasi elemento e può essere fatto utilizzando il metodo enter () del join dati e append () del selettore. Il metodo enter () dà accesso ai dati rimanenti (che non è mappato agli elementi esistenti) e il metodo append () viene utilizzato per creare un nuovo elemento dai dati corrispondenti. Cerchiamo di crearelianche per i restanti elementi di dati. La mappa dei dati è la seguente:

3. li - 30
4. li - 25
5. li - 15

Il codice per creare un nuovo elemento li è il seguente:

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

Data join fornisce un altro metodo chiamato come exit() method per elaborare gli elementi di dati rimossi dinamicamente dal set di dati come mostrato di seguito.

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

Qui, abbiamo rimosso il quarto elemento dal set di dati e il suo li corrispondente utilizzando i metodi exit () e remove ().

Il codice completo è il seguente:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

Il risultato del codice precedente sarà il seguente:

D3 contiene una raccolta di moduli. È possibile utilizzare ogni modulo in modo indipendente o una raccolta di moduli insieme per eseguire operazioni. Questo capitolo spiega in dettaglio l'API di array.

Cos'è un array?

Un array contiene una raccolta sequenziale di dimensioni fisse di elementi dello stesso tipo. Un array viene utilizzato per memorizzare una raccolta di dati, ma spesso è più utile pensare a un array come una raccolta di variabili dello stesso tipo.

Configurazione dell'API

Puoi configurare facilmente l'API utilizzando lo script seguente.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

Metodi API per statistiche di array

Di seguito sono riportati alcuni dei più importanti metodi API per le statistiche degli array.

  • d3.min(array)
  • d3.max(array)
  • d3.extent(array)
  • d3.sum(array)
  • d3.mean(array)
  • d3.quantile(array)
  • d3.variance(array)
  • d3.deviation(array)

Cerchiamo di discutere ciascuno di questi in dettaglio.

d3.min (array)

Restituisce il valore minimo nella matrice data utilizzando l'ordine naturale.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - Lo script precedente restituisce il valore minimo nell'array 20 nella tua console.

d3.max (array)

Restituisce il valore massimo in un dato array.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - Lo script precedente restituisce il valore massimo nell'array (100) nella tua console.

d3.extent (array)

Restituisce il valore minimo e massimo nella matrice data.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - Lo script precedente restituisce un valore di extent [20,100].

d3.sum (array)

Restituisce la somma della matrice di numeri data. Se l'array è vuoto, restituisce 0.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - Lo script sopra restituisce il valore della somma è 300.

d3.mean (array)

Restituisce la media del dato array di numeri.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - Lo script sopra restituisce il valore medio 60. Allo stesso modo, puoi controllare il valore mediano.

d3.quantile (array)

Restituisce il quantile p del dato array di numeri ordinato, dove p è un numero nell'intervallo [0, 1]. Ad esempio, la mediana può essere calcolata utilizzando p = 0,5, il primo quartile in p = 0,25 e il terzo quartile in p = 0,75. Questa implementazione utilizza il metodo R-7, il linguaggio di programmazione R predefinito ed Excel.

Example - Considera il seguente esempio.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Allo stesso modo, puoi controllare altri valori.

d3.variance (array)

Restituisce la varianza della matrice di numeri data.

Example - Considera il seguente script.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - Lo script precedente restituisce il valore di varianza come 1000.

d3.deviation (array)

Restituisce la deviazione standard della matrice data. Se l'array ha meno di due valori, restituisce come non definito.

Example - Considera quanto segue di seguito.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - Lo script precedente restituisce il valore di deviazione come 31.622776601683793.

Example- Eseguiamo tutti i metodi dell'API Array discussi sopra utilizzando il seguente script. Crea una pagina web "array.html" e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

Metodi API di ricerca array

Di seguito sono riportati un paio di importanti metodi API di ricerca array.

  • d3.scan(array)
  • d3. ascendente (a, b)

Cerchiamo di capire entrambi in dettaglio.

d3.scan (array)

Questo metodo viene utilizzato per eseguire una scansione lineare dell'array specificato. Restituisce l'indice dell'elemento minimo al comparatore specificato. Di seguito viene definito un semplice esempio.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3. ascendente (a, b)

Questo metodo viene utilizzato per eseguire la funzione di confronto. Può essere implementato come:

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Se nessuna funzione di confronto è specificata per il metodo di ordinamento incorporato, l'ordine predefinito è alfabetico. La funzione precedente restituisce -1, se a è minore di b, o 1, se a è maggiore di b, o 0.

Allo stesso modo, puoi eseguire il metodo discendente (a, b). Restituisce -1, se a è maggiore di b, o 1, se a è minore di b, o 0. Questa funzione esegue l'ordine naturale inverso.

Example -

Crea una pagina web array_search.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo il seguente risultato.

API Array Transformations

Di seguito sono riportati alcuni dei metodi API di trasformazione di array più importanti.

  • d3.cross (a, b [, riduttore])
  • d3.merge(arrays)
  • d3.pairs (array [, riduttore])
  • d3.permute (array, indici)
  • d3.zip(arrays)

Cerchiamo di capire ciascuno di questi in dettaglio.

d3.cross (a, b [, riduttore])

Questo metodo viene utilizzato per restituire il prodotto cartesiano dei due array dati a e b. Di seguito viene definito un semplice esempio.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (array)

Questo metodo viene utilizzato per unire gli array ed è definito di seguito.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (array [, riduttore])

Questo metodo viene utilizzato per accoppiare gli elementi dell'array ed è definito di seguito.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (array, indici)

Questo metodo viene utilizzato per eseguire la permutazione da array e indici specificati. È inoltre possibile eseguire i valori da un oggetto in un array. È spiegato di seguito.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (array)

Questo metodo viene utilizzato per restituire un array di array. Se gli array contengono solo un singolo array, l'array restituito contiene array a un elemento. Se non viene specificato alcun argomento, la matrice restituita è vuota. È definito di seguito.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

Example - Crea una pagina web array_transform e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

Una collezione è semplicemente un oggetto che raggruppa più elementi in una singola unità. È anche chiamato contenitore. Questo capitolo spiega in dettaglio l'API delle collezioni.

Configurazione dell'API

È possibile configurare l'API utilizzando il seguente script.

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

Metodi API delle raccolte

L'API delle collezioni contiene oggetti, mappe, set e nidi. Di seguito sono riportati i metodi API delle raccolte più comunemente utilizzati.

  • API degli oggetti
  • API di Maps
  • Imposta API
  • API dei nidi

Esaminiamo in dettaglio ciascuna di queste API.

API degli oggetti

Object API è uno dei tipi di dati importanti. Supporta i seguenti metodi:

  • d3.keys(object) - Questo metodo contiene le chiavi della proprietà dell'oggetto e restituisce un array dei nomi delle proprietà.

  • d3.values(object) - Questo metodo contiene i valori dell'oggetto e restituisce un array di valori di proprietà.

  • d3.entries(object)- Questo metodo viene utilizzato per restituire un array contenente sia le chiavi che i valori dell'oggetto specificato. Ogni voce è un oggetto con una chiave e un valore.

Example - Consideriamo il seguente codice.

d3.entries({one: 1})

Qui, la chiave è uno e il valore è 1.

Example - Crea una pagina web objects.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

Ora, richiedi il browser e vedrai la seguente risposta.

API di Maps

Una mappa contiene valori basati su coppie chiave e valore. Ogni coppia chiave e valore è nota come voce. Una mappa contiene solo chiavi univoche. È utile per cercare, aggiornare o eliminare elementi in base alla chiave. Esaminiamo in dettaglio i vari metodi dell'API di Maps.

  • d3.map([object[, key]])- Questo metodo viene utilizzato per creare una nuova mappa. L'oggetto viene utilizzato per copiare tutte le proprietà enumerabili.

  • map.has(key) - Questo metodo viene utilizzato per verificare se la mappa ha una voce per la stringa chiave specificata.

  • map.get(key) - Questo metodo viene utilizzato per restituire il valore per la stringa chiave specificata.

  • map.set(key, value)- Questo metodo viene utilizzato per impostare il valore per la stringa chiave specificata. Se la mappa aveva in precedenza una voce per la stessa stringa di chiavi, la vecchia voce viene sostituita con il nuovo valore.

  • map.remove(key)- Viene utilizzato per rimuovere la voce della mappa. Se la chiave non è specificata, restituisce false.

  • map.clear() - Rimuove tutte le voci da questa mappa.

  • map.keys() - Restituisce un array di chiavi stringa per ogni voce in questa mappa.

  • map.values() - Restituisce un array di valori per ogni voce in questa mappa.

  • map.entries() - Restituisce un array di oggetti valore-chiave per ogni voce in questa mappa.

  • (x) map.each(function) - Questo metodo viene utilizzato per chiamare la funzione specificata per ciascuna voce nella mappa.

  • (xi) map.empty() - Restituisce vero se e solo se questa mappa ha zero voci.

  • (xii) map.size() - Restituisce il numero di voci in questa mappa.

Example - Crea una pagina web maps.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}], 
            function(d) { return d.name; });
         console.log(month.get("jan")); // {"name": "jan"}
         console.log(month.get("apr")); // undefined
         console.log(month.has("feb")); // true
         
         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit")); // mango
         console.log(map.remove("fruit")); // remove key and return true.
         console.log(map.size());    // size is 0 because key removed.
         console.log(map.empty());   // true
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

Allo stesso modo, puoi eseguire anche altre operazioni.

Imposta API

Un set è una raccolta che non può contenere elementi duplicati. Modella l'astrazione dell'insieme matematico. Esaminiamo in dettaglio i vari metodi API dei set.

  • d3.set([array[, accessor]])- Questo metodo viene utilizzato per creare un nuovo set. La matrice viene utilizzata per aggiungere valori di stringa. Una funzione di accesso è facoltativa.

  • set.has(value) - Questo metodo viene utilizzato per verificare se il set ha una voce per la stringa di valore specificata.

  • set.add(value) - Viene utilizzato per aggiungere la stringa del valore specificato al set.

  • set.remove(value) - Viene utilizzato per rimuovere il set che contiene la stringa del valore specificato.

  • set.clear() - Rimuove tutti i valori da questo set.

  • set.values() - Questo metodo viene utilizzato per restituire un array di valori al set.

  • set.empty() - Restituisce vero se e solo se questo insieme ha valori zero.

  • set.size() - Restituisce il numero di valori in questo set.

Example - Crea una pagina web sets.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes")); // return false.
         console.log(fruits.remove("apple")); //true
         console.log(fruits.size());    // size is 2
         console.log(fruits.empty());   // true
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta sul nostro schermo.

Allo stesso modo, possiamo eseguire anche altre operazioni.

API dei nidi

L'API di annidamento contiene elementi nell'array e funziona in una struttura ad albero gerarchica. Esaminiamo in dettaglio i vari metodi API di Nests.

  • d3.nest() - Questo metodo viene utilizzato per creare un nuovo nido.

  • nest.key(key)- Questo metodo viene utilizzato per inizializzare una nuova funzione chiave. Questa funzione viene utilizzata per richiamare ogni elemento in una matrice di input e restituire elementi nel gruppo.

  • nest.sortKeys(comparator)- Questo metodo viene utilizzato per ordinare le chiavi in ​​un comparatore specificato. La funzione è definita come d3.ascending o d3.descending.

  • nest.sortValues(comparator)- Questo metodo viene utilizzato per ordinare i valori in un comparatore specificato. La funzione comparatore ordina gli elementi foglia.

  • nest.map(array)- Questo metodo viene utilizzato per applicare l'array specificato e per restituire una mappa nidificata. Ogni voce nella mappa restituita corrisponde a un valore chiave distinto restituito dalla prima funzione chiave. Il valore della voce dipende dal numero di funzioni dei tasti registrate.

  • nest.object(array) - Questo metodo viene utilizzato per applicare l'operatore annidamento all'array specificato e restituire un oggetto annidato.

  • nest.entries(array) - Questo metodo viene utilizzato per applicare l'operatore annidamento all'array specificato e restituire un array di voci di valori-chiave.

Considera una semplice pagina web nest.html per eseguire i metodi di annidamento discussi sopra.

Example - Consideriamo il seguente esempio.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

Ora, controlla il risultato in un browser e vedremo il seguente risultato.

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

Le selezioni sono una potente trasformazione guidata dai dati del DOM (Document Object Model). Viene utilizzato per impostare attributi, stili, proprietà, contenuto HTML o di testo e molto altro ancora. Questo capitolo spiega in dettaglio le selezioni API.

Configurazione dell'API

È possibile configurare l'API direttamente utilizzando lo script seguente.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Metodi API di selezione

Di seguito sono riportati i metodi più importanti nella selezione dell'API.

  • d3.selection()
  • d3.select(selector)
  • d3.selectAll(selector)
  • selection.selectAll(selector)
  • selection.filter(filter)
  • selection.merge(other)
  • d3.matcher(selector)
  • d3.creator(name)
  • selection.each(function)
  • selection.call (funzione [, argomenti ...])
  • d3.local()
  • local.set (nodo, valore)
  • local.get(node)
  • local.remove(node)

Cerchiamo ora di discutere ciascuno di questi in dettaglio.

d3.selection ()

Questo metodo viene utilizzato per selezionare l'elemento radice. Questa funzione può essere utilizzata anche per testare le selezioni o per estendere la selezione d3js.

d3.select (selettore)

Questo metodo viene utilizzato per selezionare il primo elemento che corrisponde alla stringa del selettore specificata.

Example - Consideriamo il seguente esempio.

var body = d3.select("body");

Se il selettore non è una stringa, seleziona il nodo specificato, definito di seguito.

d3.select("p").style("color", "red");

d3.selectAll (selettore)

Questo metodo seleziona tutti gli elementi che corrispondono alla stringa del selettore specificata.

Example - Consideriamo il seguente esempio.

var body = d3.selectAll("body");

Se il selettore non è una stringa, seleziona la matrice di nodi specificata, definita di seguito.

d3.selectAll("body").style("color", "red");

selection.selectAll (selettore)

Questo metodo viene utilizzato per selezionare un elemento. Seleziona gli elementi discendenti che corrispondono alla stringa del selettore specificata. Gli elementi nella selezione restituita vengono raggruppati in base al nodo padre corrispondente in questa selezione. Se nessun elemento corrisponde al selettore specificato per l'elemento corrente, o se il selettore è nullo, il gruppo all'indice corrente sarà vuoto.

Example - Consideriamo il seguente esempio.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtro)

Questo metodo viene utilizzato per filtrare la selezione, restituendo una nuova selezione che contiene solo gli elementi per i quali il filtro specificato è vero.

Example - Consideriamo il seguente esempio.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Qui, filtrare una selezione di righe di tabella restituisce solo dispari.

selection.merge (altro)

Questo metodo viene utilizzato per restituire una nuova selezione che si fonde con l'altra selezione specificata.

Example - Consideriamo il seguente esempio.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (selettore)

Questo metodo viene utilizzato per assegnare il selettore specificato. Restituisce una funzione, che restituisce true.

Example - Consideriamo il seguente esempio.

var p = selection.filter(d3.matcher("p"));

d3.creator (nome)

Questo metodo viene utilizzato per assegnare il nome dell'elemento specificato Restituisce una funzione, che crea un elemento del nome dato, assumendo che questo sia l'elemento genitore.

Example - Consideriamo il seguente esempio.

selection.append(d3.creator("p"));

selection.each (funzione)

Questo metodo viene utilizzato per richiamare la funzione specificata per ogni elemento selezionato, nell'ordine passato dal dato corrente (d), dall'indice corrente (i) e dal gruppo corrente (nodi) con questo come elemento DOM corrente (nodi [i ]). È spiegato di seguito.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (funzione [, argomenti ...])

Viene utilizzato per richiamare la funzione specificata esattamente una volta. La sintassi è mostrata di seguito.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Questo metodo può essere specificato come mostrato di seguito.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local consente di definire lo stato locale indipendente dai dati.

Example - Consideriamo il seguente esempio.

var data = d3.local();

A differenza di var, anche il valore di ogni locale ha l'ambito del DOM.

local.set (nodo, valore)

Questo metodo imposta il valore di questo locale sul nodo specificato sul valore.

Example - Consideriamo il seguente esempio.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Questo metodo restituisce il valore di questo locale sul nodo specificato. Se il nodo non definisce questo locale, restituisce il valore dall'antenato più vicino che lo definisce.

local.remove (nodo)

Questo metodo elimina il valore di questo locale dal nodo specificato. Restituisce true, se il nodo è definito, altrimenti restituisce false.

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 tracciata, riempita, usata come tracciato di ritaglio o qualsiasi combinazione di tutti e tre. Questo capitolo spiega in dettaglio l'API Paths.

Configurazione dei percorsi

È possibile configurare l'API Paths utilizzando lo script seguente.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Metodi API Paths

Alcuni dei metodi API Paths più comunemente utilizzati sono descritti brevemente come segue.

  • d3.path() - Questo metodo viene utilizzato per creare un nuovo percorso.

  • path.moveTo(x, y) - Questo metodo viene utilizzato per spostare i valori xey specificati.

  • path.closePath() - Questo metodo viene utilizzato per chiudere il percorso corrente.

  • path.lineTo(x, y) - Questo metodo viene utilizzato per creare una linea dal punto corrente ai valori x, y definiti.

  • path.quadraticCurveTo(cpx, cpy, x, y) - Questo metodo viene utilizzato per disegnare una curva quadratica dal punto corrente al punto specificato.

  • path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Questo metodo viene utilizzato per disegnare una curva di Bézier dal punto corrente al punto specificato.

  • path.arcTo(x1, y1, x2, y2, radius) - Questo metodo viene utilizzato per disegnare un arco circolare dal punto corrente a un punto specificato (x1, y1) e terminare la linea tra i punti specificati (x1, y1) e (x2, y2).

  • path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Questo metodo viene utilizzato per disegnare un arco circolare al centro (x, y), raggio, angolo iniziale e angolo finale specificati. Se il valore antiorario è vero, l'arco viene disegnato in senso antiorario, altrimenti viene disegnato in senso orario.

  • path.rect(x, y, w, h)- Questo metodo viene utilizzato per creare un nuovo sottopercorso contenente solo i quattro punti (x, y), (x + w, y), (x + w, y + h), (x, y + h). Con questi quattro punti collegati da linee rette, contrassegna il sottotracciato come chiuso. Equivale a context.rect e utilizza i comandi "lineto" di SVG.

  • path.toString() - Restituisce la rappresentazione di stringa di questo percorso in base alla specifica dei dati del percorso di SVG.

Esempio

Tracciamo una semplice linea in D3 usando l'API del percorso. Crea una pagina weblinepath.html e aggiungi le seguenti modifiche.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo il seguente risultato.

D3.js fornisce funzioni di scala per eseguire trasformazioni di dati. Queste funzioni associano un dominio di input a un intervallo di output.

Configurazione dell'API

Possiamo configurare l'API direttamente utilizzando il seguente script.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

Metodi API in scala

D3 fornisce i seguenti importanti metodi di ridimensionamento per diversi tipi di grafici. Cerchiamo quindi di capire in dettaglio.

  • d3.scaleLinear() - Costruisce una scala lineare continua in cui possiamo inserire mappe di dati (dominio) nell'intervallo di output specificato.

  • d3.scaleIdentity() - Costruisci una scala lineare in cui i dati di input sono gli stessi dell'output.

  • d3.scaleTime() - Costruisci una scala lineare in cui i dati di input sono nelle date e l'output in numeri.

  • d3.scaleLog() - Costruisci una scala logaritmica.

  • d3.scaleSqrt() - Costruisci una scala di radice quadrata.

  • d3.scalePow() - Costruisci una scala esponenziale.

  • d3.scaleSequential() - Costruisci una scala sequenziale in cui l'intervallo di output è fissato dalla funzione di interpolatore.

  • d3.scaleQuantize() - Costruisci una scala di quantizzazione con un intervallo di uscita discreto.

  • d3.scaleQuantile() - Costruire una scala quantile in cui i dati del campione di input vengono mappati all'intervallo di output discreto.

  • d3.scaleThreshold() - Costruire una scala in cui i dati di input arbitrari vengono mappati all'intervallo di output discreto.

  • d3.scaleBand() - Le scale di banda sono come le scale ordinali, tranne per il fatto che l'intervallo di output è continuo e numerico.

  • d3.scalePoint() - Costruisci una scala a punti.

  • d3.scaleOrdinal() - Costruire una scala ordinale in cui i dati di input includano alfabeti e siano mappati all'intervallo di output numerico discreto.

Prima di fare un esempio funzionante, dobbiamo prima comprendere i seguenti due termini:

  • Domain - Il dominio indica i valori minimo e massimo dei dati di input.

  • Range - L'intervallo è l'intervallo di output, a cui vorremmo mappare i valori di input ...

Esempio di lavoro

Eseguiamo la funzione d3.scaleLinear in questo esempio. Per fare ciò, è necessario attenersi ai seguenti passaggi:

Step 1 - Define variables - Definisci variabili e dati SVG utilizzando la codifica seguente.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - Create linear scale - Usa il codice seguente per creare una scala lineare.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Qui, per il valore minimo e massimo per il nostro dominio manualmente, possiamo utilizzare il built-in d3.min() e d3.max() funzioni, che restituiranno rispettivamente i valori minimo e massimo dal nostro array di dati.

Step 3 - Append SVG attributes - Aggiungi gli elementi SVG utilizzando il codice fornito di seguito.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Step 4 - Apply transformation - Applicare la trasformazione utilizzando il codice sottostante.

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

Step 5 - Append rect elements - Aggiungi gli elementi rect al ridimensionamento come mostrato di seguito.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - Display data - Ora visualizza i dati utilizzando la codifica fornita di seguito.

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

Step 7 - Working Example - Ora, creiamo un grafico a barre usando la funzione d3.scaleLinear () come segue.

Crea una pagina web "scales.html" e aggiungi le seguenti modifiche.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

Il codice sopra mostrerà il seguente risultato nel browser.

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

Configurazione dell'API Axis

È possibile configurare l'API utilizzando il seguente script.

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Metodi API Axis

D3 fornisce le seguenti funzioni significative per disegnare gli assi. Sono descritti in breve come segue.

  • d3.axisTop() - Questo metodo viene utilizzato per creare un asse orizzontale superiore.

  • d3.axisRight() - Questo metodo viene utilizzato per creare un asse verticale orientato a destra.

  • d3.axisBottom() - Questo metodo viene utilizzato per creare un asse orizzontale inferiore.

  • d3.axisLeft() - Crea l'asse verticale sinistro.

Esempio di lavoro

Impariamo come aggiungere gli assi xey a un grafico. Per fare ciò, dobbiamo attenerci ai passaggi indicati di seguito.

Step 1 - Define variables - Definisci SVG e variabili di dati utilizzando il codice seguente.

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 2 - Create a scale linear function - Creare una funzione lineare di scala per entrambi gli assi x e y come definito di seguito.

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

Qui abbiamo creato una scala lineare e specificato il dominio e l'intervallo.

Step 3 - Add scales to x-axis - Ora possiamo aggiungere scale all'asse x usando il codice seguente.

var x_axis = d3.axisBottom()
   .scale(xscale);

Qui, usiamo d3.axisBottom per creare il nostro asse x e fornirgli la scala, definita in precedenza.

Step 4 - Add scales to the y-axis - Usa il codice seguente per aggiungere scale all'asse y.

var y_axis = d3.axisLeft()
   .scale(yscale);

Qui, usiamo d3.axisLeft per creare il nostro asse y e fornirgli la scala che abbiamo definito sopra.

Step 5 - Apply transformation - È possibile aggiungere un elemento del gruppo e inserire gli assi x, y, definito di seguito.

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

Step 6 - Append group elements - Applicare elementi di transizione e gruppo utilizzando il codice seguente.

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

Step 7 - Working Example- L'elenco completo del codice è fornito nel seguente blocco di codice. Crea una pagina webaxes.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
    
         var x_axis = d3.axisBottom().scale(xscale);
         
         var y_axis = d3.axisLeft().scale(yscale);
         
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         
         var xAxisTranslate = height/2 + 10;
         
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo le seguenti modifiche.

Questo capitolo discute i diversi generatori di forme in D3.js.

Configurazione dell'API

È possibile configurare l'API Shapes utilizzando il seguente script.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Generatori di forme

D3.js supporta diverse forme. Esaminiamo in dettaglio le forme prominenti.

API Arcs

Il generatore di arco produce una forma circolare o anulare. Abbiamo utilizzato questi metodi API nel capitolo precedente dei grafici a torta. Comprendiamo in dettaglio i vari metodi dell'API di Arcs.

  • d3.arc() - Questo metodo viene utilizzato per creare un nuovo generatore di arco.

  • arc(args)- Viene utilizzato per generare un arco con gli argomenti specificati. Di seguito vengono definite le impostazioni predefinite con i raggi e gli angoli di un oggetto.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>
  • arc.centroid(args) - Questo metodo viene utilizzato per calcolare il punto medio [x, y] della linea centrale dell'arco con gli argomenti specificati.

  • arc.innerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio interno dal raggio dato e restituire un generatore di arco. È definito di seguito:

function innerRadius(d) {
   return d.innerRadius;
}
  • arc.outerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio esterno dal raggio specificato e restituire un generatore di arco. È definito come segue.

function outerRadius(d) {
   return d.outerRadius;
}
  • arc.cornerRadius([radius])- Questo metodo viene utilizzato per impostare il raggio dell'angolo dal raggio dato e restituire un generatore di arco. È definito come segue.

function cornerRadius() {
   return 0;
}

Se il raggio dell'angolo è maggiore di zero, gli angoli dell'arco vengono arrotondati utilizzando i cerchi del raggio specificato. Il raggio dell'angolo non può essere maggiore di (outerRadius - innerRadius) / 2.

  • arc.startAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo iniziale della funzione dall'angolo specificato. È definito come segue:

function startAngle(d) {
   return d.startAngle;
}
  • arc.endAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo finale sulla funzione dall'angolo specificato. È definito come segue.

function endAngle(d) {
   return d.endAngle;
}
  • arc.padAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo del pad sulla funzione dall'angolo specificato. È definito come segue.

function padAngle() {
   return d && d.padAngle;
}
  • (x) arc.padRadius([radius])- Questo metodo viene utilizzato per impostare il raggio del pad sulla funzione specificata dal raggio specificato. Il raggio del pad determina la distanza lineare fissa che separa gli archi adiacenti, definita padRadius * padAngle.

  • (xi) arc.context([context]) - Questo metodo viene utilizzato per impostare il contesto e restituire un generatore di arco.

Pies API

Questa API viene utilizzata per creare un generatore di torta. Abbiamo eseguito questi metodi API nel capitolo precedente. Discuteremo tutti questi metodi in dettaglio.

  • d3.pie() - Costruisce un nuovo generatore di torta con le impostazioni predefinite.

  • pie(data[, arguments])- Questo metodo viene utilizzato per generare una torta per i valori di matrice specificati. Restituisce un array di oggetti. Gli oggetti sono gli angoli dell'arco del datum. Ogni oggetto ha le seguenti proprietà:

    • data- il dato di input; l'elemento corrispondente nella matrice dei dati di input.

    • value - il valore numerico dell'arco.

    • index - indice dell'arco.

    • startAngle - l'angolo di inizio dell'arco.

    • endAngle - l'angolo finale dell'arco.

    • padAngle - l'angolo del pad dell'arco.

  • pie.value([value])- Questo metodo viene utilizzato per impostare il valore sulla funzione specificata e genera una torta. È definito come segue:

function value(d) {
   return d;
}
  • pie.sort([compare])- Questo metodo viene utilizzato per ordinare i dati alla funzione specificata e genera una torta. La funzione di confronto è definita come segue.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Qui, la funzione di confronto accetta due argomenti "a" e "b", ogni elemento dall'array di dati di input. Se l'arco per "a" deve essere prima dell'arco per "b", il comparatore deve restituire un numero inferiore a zero. Se l'arco per "a" deve essere dopo l'arco per "b", il comparatore deve restituire un numero maggiore di zero.

  • pie.sortValues([compare])- Questo metodo viene utilizzato per confrontare il valore dalla funzione data e genera una torta. La funzione è definita come segue.

function compare(a, b) {
   return b - a;
}
  • pie.startAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo iniziale della torta sulla funzione specificata. Se l'angolo non è specificato, restituisce l'angolo iniziale corrente. È definito come segue.

function startAngle() {
   return 0;
}
  • pie.endAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo finale della torta sulla funzione specificata. Se l'angolo non è specificato, restituisce l'angolo finale corrente. È definito come segue.

function endAngle() {
   return 2 * Math.PI;
}
  • pie.padAngle([angle])- Questo metodo viene utilizzato per impostare l'angolo del pad sulla funzione specificata e genera la torta. La funzione è definita come segue.

function padAngle() {
   return 0;
}

API Lines

L'API Lines viene utilizzata per generare una riga. Abbiamo utilizzato questi metodi API inGraphscapitolo. Esaminiamo ogni metodo in dettaglio.

  • d3.line() - Questo metodo viene utilizzato per creare un nuovo generatore di linea.

  • line(data) - Questo metodo viene utilizzato per generare una riga per il dato array di dati.

  • line.x([x])- Questo metodo viene utilizzato per impostare la funzione di accesso x sulla funzione specificata e genera una riga. La funzione è definita di seguito,

function x(d) {
   return d[0];
}
  • line.y([y])- Questo metodo viene utilizzato per impostare la funzione di accesso "y" sulla funzione specificata e genera una riga. La funzione è definita come segue.

function y(d) {
   return d[1];
}
  • line.defined([defined])- Questo metodo viene utilizzato per impostare la funzione di accesso definita sulla funzione specificata. È definito come segue.

function defined() {
  return true;
}
  • line.curve([curve]) - Serve per impostare la curva e genera la linea.

  • line.context([context])- Questo metodo viene utilizzato per impostare il contesto e genera una linea. Se il contesto non è specificato, restituisce null.

  • d3.lineRadial()- Questo metodo viene utilizzato per creare una nuova linea radiale; è equivalente al generatore di linee cartesiane.

  • lineRadial.radius([radius])- Questo metodo viene utilizzato per disegnare una linea radiale e la funzione di accesso restituisce il raggio. Prende la distanza dall'origine (0,0).

Nel prossimo capitolo impareremo a conoscere l'API Colors in D3.js.

I colori vengono visualizzati combinando ROSSO, VERDE e BLU. I colori possono essere specificati nei seguenti modi diversi:

  • Dai nomi dei colori
  • Come valori RGB
  • Come valori esadecimali
  • Come valori HSL
  • Come valori HWB

L'API d3-color fornisce rappresentazioni per vari colori. È possibile eseguire operazioni di conversione e manipolazione nell'API. Cerchiamo di capire queste operazioni in dettaglio.

Configurazione dell'API

Puoi caricare direttamente l'API utilizzando il seguente script.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>

</script>

Operazioni di base

Esaminiamo le operazioni di base sui colori in D3.

Convert color value to HSL - Per convertire il valore del colore in HSL, utilizzare quanto segue Example -

var convert = d3.hsl("green");

È possibile ruotare la tonalità di 45 ° come mostrato di seguito.

convert.h + =  45;

Allo stesso modo, puoi modificare anche il livello di saturazione. Per sfumare il valore del colore, è possibile modificare il valore di opacità come mostrato di seguito.

convert.opacity = 0.5;

Metodi API di colore

Di seguito sono riportati alcuni dei più importanti metodi API del colore.

  • d3.color(specifier)
  • color.opacity
  • color.rgb()
  • color.toString()
  • color.displayable()
  • d3.rgb(color)
  • d3.hsl(color)
  • d3.lab(color)
  • d3.hcl(color)
  • d3.cubehelix(color)

Comprendiamo in dettaglio ciascuno di questi metodi API del colore.

d3.color (specificatore)

Viene utilizzato per analizzare il colore CSS specificato e restituire il colore RGB o HSL. Se lo specificatore non viene fornito, viene restituito null.

Example - Consideriamo il seguente esempio.

<script>
   var color = d3.color("green");  // asign color name directly
   console.log(color);
</script>

Vedremo la seguente risposta sul nostro schermo:

{r: 0, g: 128, b: 0, opacity: 1}

color.opacity

Se vogliamo sfumare il colore, possiamo cambiare il valore di opacità. È nell'intervallo [0, 1].

Example - Consideriamo il seguente esempio.

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

Vedremo la seguente risposta sullo schermo:

1

color.rgb ()

Restituisce il valore RGB per il colore. Consideriamo il seguente esempio.

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

Vedremo la seguente risposta sul nostro schermo.

{r: 0, g: 128, b: 0, opacity: 1}

color.toString ()

Restituisce una stringa che rappresenta il colore secondo la specifica del modello di oggetti CSS. Consideriamo il seguente esempio.

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

Vedremo la seguente risposta sul nostro schermo.

rgb(0, 128, 0)

color.displayable ()

Restituisce vero, se il colore è visualizzabile. Restituisce falso, se il valore del colore RGB è minore di 0 o maggiore di 255, o se l'opacità non è compresa nell'intervallo [0, 1]. Consideriamo il seguente esempio.

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

Vedremo la seguente risposta sul nostro schermo.

true

d3.rgb (colore)

Questo metodo viene utilizzato per costruire un nuovo colore RGB. Consideriamo il seguente esempio.

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

Vedremo la seguente risposta sullo schermo.

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl (colore)

Viene utilizzato per costruire un nuovo colore HSL. I valori sono esposti come proprietà h, se l sull'istanza restituita. Consideriamo il seguente esempio.

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

Vedremo la seguente risposta sullo schermo.

330
0.5

d3.lab (colore)

Costruisce un nuovo colore Lab. I valori del canale sono esposti come proprietà "l", "a" e "b" sull'istanza restituita.

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

Vedremo la seguente risposta sullo schermo.

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl (colore)

Costruisce un nuovo colore HCL. I valori del canale sono esposti come proprietà h, c e l sull'istanza restituita. Consideriamo il seguente esempio.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Vedremo la seguente risposta sullo schermo.

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix (colore)

Costruisce un nuovo colore Cubehelix. I valori sono esposti come proprietà h, se l sull'istanza restituita. Consideriamo il seguente esempio.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Vedremo la seguente risposta sullo schermo,

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

Esempio di lavoro

Creiamo una nuova pagina web - color.htmlper eseguire tutti i metodi API del colore. L'elenco completo del codice è definito di seguito.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

D3 Le transizioni prendono una selezione di elementi e per ogni elemento; applica una transizione a una parte della definizione corrente dell'elemento.

Configurazione dell'API

È possibile configurare l'API di transizione utilizzando il seguente script.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Metodi API di transizione

Esaminiamo in dettaglio i metodi dell'API di transizione.

Selezione di elementi

Parliamo in dettaglio dei vari elementi di selezione.

  • selection.transition([name])- Questo metodo viene utilizzato per restituire una nuova transizione di selezione con il nome. Se non viene specificato un nome, restituisce null.

  • selection.interrupt([name]) - Questo metodo viene utilizzato per interrompere gli elementi selezionati della transizione con il nome ed è definito di seguito.

selection.interrupt().selectAll("*").interrupt();
  • d3.interrupt(node[, name]) - Questo metodo viene utilizzato per interrompere la transizione del nome specificato sul nodo specificato.

  • d3.transition([name]) - Questo metodo viene utilizzato per restituire una nuova transizione con il nome specificato.

  • transition.select(selector) - Questo metodo viene utilizzato per selezionare il primo elemento che corrisponde al selettore specificato e restituisce una transizione sulla selezione risultante, definita di seguito.

transition
   .selection()
   .select(selector)
   .transition(transition)
  • transition.selectAll(selector)- Questo metodo viene utilizzato per selezionare tutti gli elementi che corrispondono al selettore specificato e restituisce una transizione sulla selezione risultante. È definito di seguito:

transition
   .selection()
   .selectAll(selector)
   .transition(transition)
  • transition.filter(filter) - Questo metodo viene utilizzato per selezionare gli elementi corrispondenti al filtro specificato, sono definiti di seguito.

transition
   .selection()
   .filter(filter)
   .transition(transition)
  • transition.merge(other)- Questo metodo viene utilizzato per unire la transizione con un'altra transizione. È definito di seguito.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)
  • transition.transition()- Questo metodo viene utilizzato per restituire una nuova transizione sugli elementi selezionati. È programmato per iniziare quando la transizione si interrompe. La nuova transizione eredita il nome, la durata e l'andamento della transizione.

Example - Consideriamo il seguente esempio.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Qui, il corpo sfuma in giallo e inizia solo cinque secondi prima dell'ultima transizione.

  • d3.active(node[, name]) - Questo metodo viene utilizzato per restituire la transizione sul nodo specificato con il nome.

Metodi di temporizzazione

Esaminiamo in dettaglio i metodi API dei tempi di transizione.

  • transition.delay([value])- Questo metodo viene utilizzato per impostare il ritardo di transizione sul valore specificato. Se una funzione viene valutata per ogni elemento selezionato, viene passata al dato corrente "d" e indice "i", con il contesto come elemento DOM corrente. Se non viene specificato un valore, restituisce il valore corrente del ritardo per il primo elemento (non nullo) nella transizione. È definito di seguito,

transition.delay(function(d, i) { return i * 10; });
  • transition.duration([value])- Questo metodo viene utilizzato per impostare la durata della transizione sul valore specificato. Se non viene specificato un valore, restituisce il valore corrente della durata per il primo elemento (non nullo) nella transizione.

  • transition.ease([value])- Questo metodo viene utilizzato per facilitare il valore di transizione per gli elementi selezionati. La funzione di andamento viene invocata per ogni fotogramma dell'animazione e viene passato il tempo normalizzato "t" nell'intervallo [0, 1]. Se un valore non viene specificato, restituisce la funzione di andamento corrente per il primo elemento (non nullo) nella transizione.

Nel prossimo capitolo, discuteremo il concetto di drag and drop in d3.js.

Il drag and drop è uno dei concetti più familiari in d3.js. Questo capitolo spiega in dettaglio il trascinamento e i suoi metodi.

Installazione

Possiamo includere direttamente l'API di trascinamento utilizzando il seguente script.

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

Trascinamento dei metodi API

Di seguito sono riportati alcuni dei metodi API di trascinamento più importanti in D3.js.

  • d3.drag()
  • drag(selection)
  • drag.container([container])
  • drag.filter([filter])
  • drag.subject([subject])
  • drag.clickDistance([distance])
  • drag.on (typenames, [listener])
  • d3.dragDisable(window)
  • d3.dragEnable (finestra [, noclick])

Vediamo ora di capire ciascuno di questi in dettaglio.

d3.drag ()

Questo metodo viene utilizzato per creare un nuovo trascinamento. È possibile chiamare questo metodo utilizzando il seguente script.

<script>
   var drag = d3.drag();
</script>

trascina (selezione)

Questo metodo viene utilizzato per applicare il trascinamento alla selezione specificata. Puoi richiamare questa funzione usandoselection.call. Di seguito viene definito un semplice esempio.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Qui, il comportamento di trascinamento applicato agli elementi selezionati avviene tramite selection.call.

drag.container([container])

Viene utilizzato per impostare il contenitore sulla funzione specificata per il trascinamento. Se un contenitore non viene specificato, restituisce la funzione di accesso corrente. Per trascinare qualsiasi elemento grafico con una tela, puoi ridefinire il contenitore come se stesso. È definito di seguito.

function container() {
   return this;
}

drag.filter ([filtro])

Viene utilizzato per impostare il filtro per la funzione specificata. Se il filtro non è specificato, restituisce il filtro corrente come definito di seguito.

function filter() {
   return !d3.event.button;
}

drag.subject ([oggetto])

Viene utilizzato per impostare l'oggetto sulla funzione specificata per il trascinamento ed è definito di seguito.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

Qui, il soggetto rappresenta la cosa trascinata. Ad esempio, se desideri trascinare elementi rettangolari in SVG, l'oggetto predefinito è il dato del rettangolo che viene trascinato.

drag.clickDistance ([distanza])

Questo metodo viene utilizzato per impostare la distanza massima per fare clic su un evento mousedown e mouseup. Se la distanza non è specificata, punta a zero.

drag.on (typenames, [listener])

Questo metodo viene utilizzato per impostare il listener di eventi per i nomi di tipo specificati per il trascinamento. I nomi dei tipi sono una stringa contenente uno o più nomi di tipi separati da spazi. Ogni nome di tipo è un tipo, eventualmente seguito da un punto (.) E da un nome, ad esempio drag.one e drag.two. Questo tipo dovrebbe provenire da uno dei seguenti:

  • start - avvia un nuovo puntatore.

  • drag - trascina un puntatore attivo.

  • end - Inattivo un puntatore attivo.

d3.dragDisable (finestra)

Questo metodo viene utilizzato per disabilitare la selezione del trascinamento. Impedisce l'azione dell'evento mousedown. La maggior parte dei browser selezionati supporta questa azione per impostazione predefinita. Se non supportato, puoi impostare la proprietà CSS su nessuno.

d3.dragEnable (finestra [, noclick])

Questo metodo viene utilizzato per abilitare la selezione del trascinamento della selezione nella posizione della finestra specificata. Viene utilizzato per richiamare l'azione dell'evento mouseup. Se si assegna il valore noclick a true, l'evento click scade con un timeout di zero millisecondi.

API di trascinamento: trascina eventi

Il metodo D3.event viene utilizzato per impostare l'evento di trascinamento. Consiste dei seguenti campi:

  • Target - Rappresenta il comportamento di trascinamento.

  • Type - È una stringa e può essere una delle seguenti: "inizio", "trascina" o "fine".

  • Subject - L'oggetto trascina, definito da drag.subject.

event.on (typenames, [listener])

L'oggetto evento espone il metodo event.on per eseguire il trascinamento. È definito come segue.

d3.event.on("drag", dragged).on("end", ended);

Lo zoom aiuta a ridimensionare i tuoi contenuti. È possibile concentrarsi su una particolare regione utilizzando l'approccio del clic e del trascinamento. In questo capitolo, discuteremo in dettaglio dell'API di zoom.

Configurazione dell'API

È possibile caricare l'API di zoom direttamente da "d3js.org" utilizzando il seguente script.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Metodi API per lo zoom

Di seguito sono riportati alcuni dei metodi API di zoom più comunemente utilizzati.

  • d3.zoom()
  • zoom(selection)
  • zoom.transform (selezione, trasformazione)
  • zoom.translateBy (selezione, x, y)
  • zoom.translateTo (selezione, x, y)
  • zoom.scaleTo (selezione, k)
  • zoom.scaleBy (selezione, k)
  • zoom.filter([filter])
  • zoom.wheelDelta([delta])
  • zoom.extent([extent])
  • zoom.scaleExtent([extent])
  • zoom.translateExtent([extent])
  • zoom.clickDistance([distance])
  • zoom.duration([duration])
  • zoom.interpolate([interpolate])
  • zoom.on (typenames [, listener])

Esaminiamo brevemente tutti questi metodi API di zoom.

d3.zoom ()

Crea un nuovo comportamento di zoom. Possiamo accedervi utilizzando lo script qui sotto.

<script>
   var zoom = d3.zoom();
</script>

zoom (selezione)

Viene utilizzato per applicare la trasformazione dello zoom su un elemento selezionato. Ad esempio, puoi creare un'istanza di un comportamento mousedown.zoom utilizzando la seguente sintassi.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (selezione, trasformazione)

Viene utilizzato per impostare la trasformazione di zoom corrente degli elementi selezionati sulla trasformazione specificata. Ad esempio, possiamo reimpostare la trasformazione dello zoom sulla trasformazione dell'identità utilizzando la sintassi seguente.

selection.call(zoom.transform, d3.zoomIdentity);

Possiamo anche reimpostare la trasformazione dello zoom sulla trasformazione dell'identità per 1000 millisecondi utilizzando la sintassi seguente.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (selezione, x, y)

Viene utilizzato per tradurre l'attuale trasformazione dello zoom degli elementi selezionati in valori xey. È possibile specificare i valori di conversione xey come numeri o come funzioni che restituiscono numeri. Se una funzione viene invocata per l'elemento selezionato, viene passata attraverso il dato corrente "d" e l'indice "i" per DOM. Un codice di esempio è definito di seguito.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (selezione, x, y)

Viene utilizzato per tradurre la trasformazione dello zoom corrente degli elementi selezionati nella posizione specificata di x e y.

zoom.scaleTo (selezione, k)

Viene utilizzato per ridimensionare la trasformazione dello zoom corrente degli elementi selezionati a k. Qui,k è un fattore di scala, specificato come numeri o funzioni.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (selezione, k)

Viene utilizzato per scalare la trasformazione zoon corrente degli elementi selezionati di k. Qui,k è un fattore di scala, specificato come numeri o come funzioni che restituiscono numeri.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filtro])

Viene utilizzato per impostare il filtro sulla funzione specificata per il comportamento dello zoom. Se il filtro non è specificato, restituisce il filtro corrente come mostrato di seguito.

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta ([delta])

Il valore di Δviene restituito dalla funzione delta della ruota. Se delta non è specificato, restituisce la funzione delta della ruota corrente.

zoom.extent ([extent])

Viene utilizzato per impostare l'estensione ai punti dell'array specificati. Se l'extent non è specificato, restituisce la funzione di accesso dell'extent corrente, il cui valore predefinito è [[0, 0], [width, height]], dove width è la larghezza del client dell'elemento e height è la sua altezza del client.

zoom.scaleExtent ([extent])

Viene utilizzato per impostare l'estensione della scala sull'array di numeri specificato [k0, k1]. Qui,k0è il fattore di scala minimo consentito. Mentre,k1è il fattore di scala massimo consentito. Se l'estensione non è specificata, restituisce l'estensione della scala corrente, che per impostazione predefinita è [0, ∞]. Considera il codice di esempio definito di seguito.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

L'utente può provare a zoomare ruotando, quando è già al limite corrispondente dell'estensione della scala. Se vogliamo impedire lo scorrimento sull'input della rotellina indipendentemente dall'estensione della scala, registrare un listener di eventi della rotellina per impedire il comportamento predefinito del browser.

zoom.translateExtent ([extent])

Se l'estensione è specificata, imposta l'estensione di traslazione sull'array di punti specificato. Se l'estensione non è specificata, restituisce l'estensione di traduzione corrente, che per impostazione predefinita è [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([distanza])

Questo metodo viene utilizzato per impostare la distanza massima che l'area zoomabile può spostarsi tra su e giù, che attiverà un successivo evento di clic.

zoom.duration ([duration])

Questo metodo viene utilizzato per impostare la durata delle transizioni di zoom al doppio clic e al doppio tocco sul numero di millisecondi specificato e restituisce il comportamento dello zoom. Se la durata non è specificata, restituisce la durata corrente, che per impostazione predefinita è 250 millisecondi, definita di seguito.

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolate])

Questo metodo viene utilizzato per interpolare per le transizioni di zoom alla funzione specificata. Se interpolate non è specificato, restituisce il factory di interpolazione corrente, il cui valore predefinito è d3.interpolateZoom.

zoom.on (typenames [, listener])

Se il listener è specificato, imposta il listener di eventi per i nomi dei tipi specificati e restituisce il comportamento dello zoom. I nomi dei tipi sono una stringa contenente uno o più nomi di tipi separati da spazi. Ogni nome di tipo è un tipo, eventualmente seguito da un punto (.) E da un nome, ad esempio zoom.one e zoom.second. Il nome consente di registrare più listener per lo stesso tipo. Questo tipo deve essere uno dei seguenti:

  • Start - dopo l'inizio dello zoom (ad esempio su mousedown).

  • Zoom - dopo una modifica alla trasformazione dello zoom (come su mousemove).

  • End - al termine dello zoom (ad esempio su mouseup).

Nel prossimo capitolo, discuteremo le diverse API delle richieste in D3.js.

D3.js fornisce un'API di richiesta per eseguire XMLHttpRequest. Questo capitolo spiega in dettaglio le varie API delle richieste.

XMLHttpRequest

XMLHttpRequest è il client http integrato per emulare l'oggetto XMLHttpRequest del browser. Può essere utilizzato con JS progettato per i browser per migliorare il riutilizzo del codice e consentire l'utilizzo delle librerie esistenti.

È possibile includere il modulo nel progetto e utilizzarlo come oggetto XHR basato su browser come spiegato di seguito.

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

Supporta sia richieste asincrone che sincrone ed esegue richieste GET, POST, PUT e DELETE.

Configurazione delle richieste

È possibile caricare direttamente da "d3js.org" utilizzando lo script seguente.

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

Qui, l'API delle richieste ha il supporto integrato per l'analisi di JSON, CSV e TSV. È possibile analizzare formati aggiuntivi utilizzando direttamente la richiesta o il testo.

Carica file di testo

Per caricare un file di testo, utilizzare la seguente sintassi.

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text); 
});

Analisi dei file CSV

Per caricare e analizzare un file CSV, utilizzare la seguente sintassi.

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data); 
});

Allo stesso modo, puoi caricare anche i file JSON e TSV.

Esempio di lavoro

Vediamo un semplice esempio di come caricare e analizzare un file CSV. Prima di ciò, è necessario creare un file CSV denominato "sample.csv" nella cartella dell'applicazione d3 come mostrato di seguito.

Num1,Num2
1,2
3,4
5,6
7,8
9,10

Ora, crea una pagina web "requests.html" utilizzando il seguente script.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data); 
         });
      </script>
   </body>
</html>

Ora, richiedi il browser e vedrai la seguente risposta,

Richiede metodi API

Di seguito sono riportati alcuni dei metodi API Requests più comunemente utilizzati.

  • d3.request (url [, callback])
  • request.header (nome [, valore])
  • request.mimeType([type])
  • request.user([value])
  • request.password([value])
  • request.timeout([timeout])
  • request.get([data])
  • request.post([data])
  • request.send (metodo [, dati])
  • request.abort()
  • d3.csv (url [[, row], callback])

Parliamo ora brevemente di ciascuno di questi.

d3.request (url [, callback])

Restituisce una nuova richiesta per l'URL fornito. Se viene assegnato un callback, viene considerato come una richiesta di chiamata altrimenti la richiesta non è ancora chiamata. È definito di seguito.

d3.request(url)
   .get(callback);

È possibile pubblicare alcuni parametri di query utilizzando la sintassi seguente.

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

Se desideri specificare un'intestazione della richiesta o un tipo MIME, non devi specificare una richiamata al costruttore.

request.header (nome [, valore])

Viene utilizzato per impostare il valore nell'intestazione della richiesta con il nome specificato. Se non viene specificato alcun valore, rimuove l'intestazione della richiesta con il nome specificato. È definito di seguito.

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

Qui, l'intestazione X-Requested-With di XMLHttpRequest è una richiesta predefinita.

request.mimeType ([tipo])

Viene utilizzato per assegnare il tipo MIME al valore specificato. È definito di seguito.

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

request.user ([value])

Viene utilizzato per assegnare il nome utente per l'autenticazione. Se un nome utente non è specificato, il valore predefinito è null.

request.password ([valore])

Se viene specificato un valore, imposta la password per l'autenticazione.

request.timeout ([timeout])

Se viene specificato un timeout, imposta il timeout sul numero di millisecondi specificato.

request.get ([dati])

Questo metodo viene utilizzato per inviare la richiesta con il metodo GET. È definito di seguito.

request.send("GET", data, callback);

request.post ([data])

Questo metodo viene utilizzato per inviare la richiesta con il metodo POST. È definito di seguito.

request.send("POST", data, callback);

request.send (metodo [, dati])

Questo metodo viene utilizzato per inviare la richiesta utilizzando il metodo GET o POST specificato.

request.abort ()

Questo metodo viene utilizzato per interrompere la richiesta.

d3.csv (url [[, row], callback])

Restituisce una nuova richiesta per il file CSV all'URL specificato con il tipo Mime predefinito text / csv. La seguente sintassi viene visualizzata senza richiamata.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

Se si specifica una richiamata con il metodo POST, viene definita di seguito.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

Esempio

Crea un file csv denominato "lang.csv" nella directory della cartella principale dell'applicazione d3 e aggiungi le seguenti modifiche.

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

Creare una pagina web "csv.html" e aggiungervi il seguente script.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

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. Bene, i valori separati da delimitatore sonocomma separated values (CSV) o tab-separated values(TSV). Questo capitolo spiega in dettaglio i valori separati da delimitatori.

Configurazione dell'API

Possiamo facilmente caricare l'API utilizzando la seguente sintassi.

<script src = "https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
   var data = d3.csvParse(string);
</script>

Metodi API

Di seguito sono riportati i vari metodi API dei valori separati da delimitatori.

  • d3.csvParse (stringa [, riga])
  • d3.csvParseRows (stringa [, riga])
  • d3.csvFormat (righe [, colonne])
  • d3.csvFormatRows(rows)
  • d3.tsvParse (stringa [, riga])
  • d3.tsvParseRows (stringa [, riga])
  • d3.tsvFormat (righe [, colonne])
  • d3.tsvFormatRows(rows)

Esaminiamo in dettaglio ciascuno di questi metodi API.

d3.csvParse (stringa [, riga])

Questo metodo viene utilizzato per analizzare il formato csv. Considera il filedata.csv quello è mostrato sotto.

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

Ora possiamo applicare la funzione sopra indicata.

Example - Consideriamo il seguente esempio.

var data = d3.csvParse(string, function(d) {
   return {
      year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
      population: d.population
   };
});

Qui, analizza la stringa specificata nei valori separati da delimitatori. Restituisce un array di oggetti che rappresentano le righe analizzate.

d3.csvParseRows (stringa [, riga])

Questo metodo viene utilizzato per analizzare il formato csv equivalente alle righe.

var data = d3.csvParseRows(string, function(d, i) {
   return {
      year: new Date(+d[0], 0, 1), // convert first colum column to Date
      population: d[1],
   };
});

Analizza ogni riga nel file csv.

d3.csvFormat (righe [, colonne])

Questo metodo viene utilizzato per formattare le righe e le colonne csv.

Example - Consideriamo il seguente esempio.

var string = d3.csvFormat(data, ["year", "population"]);

Qui, se le colonne non sono specificate, l'elenco dei nomi delle colonne che forma la riga di intestazione è determinato dall'unione di tutte le proprietà su tutti gli oggetti nelle righe. Se vengono specificate colonne, si tratta di un array di stringhe che rappresentano i nomi delle colonne.

d3.csvFormatRows (righe)

Questo metodo viene utilizzato per formattare le righe csv.

Example - Consideriamo il seguente esempio.

var string = d3.csvFormatRows(data.map(function(d, i) {
   return [
      d.year.getFullYear(), // Assuming d.year is a Date object.
      d.population
   ];
}));

Qui, formatta l'array specificato di righe di stringhe come valori separati da delimitatori, restituendo una stringa.

d3.tsvParse (stringa [, riga])

Questo metodo viene utilizzato per analizzare il formato tsv. È simile a csvParse.

d3.tsvParseRows (stringa [, riga])

Questo metodo viene utilizzato per analizzare il formato tsv equivalente alle righe. È simile alla funzione csvParseRows.

d3.tsvFormat (righe [, colonne])

Questo metodo viene utilizzato per formattare le righe e le colonne tsv.

d3.tsvFormatRows (righe)

Questo metodo viene utilizzato per formattare le righe tsv.

Il modulo Timer API viene utilizzato per eseguire le animazioni simultanee con un ritardo temporale sincronizzato. UtilizzarequestAnimationFrameper l'animazione. Questo capitolo spiega in dettaglio il modulo API Timer.

requestAnimationFrame

Questo metodo indica al browser che si desidera eseguire un'animazione e richiede che il browser chiami una funzione specificata per aggiornare un'animazione.

Configurazione del timer

Possiamo facilmente caricare il timer direttamente da d3js.org utilizzando il seguente script.

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

Metodi API Timer

L'API Timer supporta i seguenti importanti metodi. Tutti questi sono spiegati in dettaglio come segue.

d3.now ()

Questo metodo restituisce l'ora corrente.

d3.timer (callback [, delay [, time]])

Questo metodo viene utilizzato per programmare un nuovo timer e richiama il timer fino all'arresto. È possibile impostare un ritardo numerico in MS, ma è facoltativo altrimenti il ​​valore predefinito è zero. Se l'ora non è specificata, viene considerata come d3.now ().

timer.restart (callback [, delay [, time]])

Riavvia un timer con la richiamata specificata e il ritardo e l'ora opzionali.

timer.stop ()

Questo metodo arresta il timer, impedendo i callback successivi.

d3.timeout (callback [, delay [, time]])

Viene utilizzato per arrestare il timer al primo richiamo. La richiamata viene passata come tempo trascorso.

d3.interval (callback [, delay [, time]])

Viene richiamato su un particolare intervallo di tempo. Se il ritardo non è specificato, richiede il tempo del timer.

Esempio

Crea una pagina web "timer.html" e aggiungi il seguente script.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

Vedremo la seguente risposta sullo schermo.

Eseguiamo un grafico a barre animato in questo capitolo. Per questo esempio, prendiamo il file data.csv utilizzato nel capitolo precedente dei record della popolazione come set di dati e generiamo un grafico a barre animato.

Per fare ciò, dobbiamo eseguire i seguenti passaggi:

Step 1 - Apply styles - Applicare gli stili CSS utilizzando la codifica fornita di seguito.

<style>
   .bar {
      fill: green;
   }
   
   .highlight {
      fill: red;
   }
   
   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

Step 2 - Define variables - Definiamo gli attributi SVG utilizzando lo script seguente.

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

Step 3 - Append text - Ora, aggiungi del testo e applica la trasformazione utilizzando la codifica di seguito.

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

Step 4 - Create scale range- In questo passaggio, possiamo creare un intervallo di scala e aggiungere gli elementi del gruppo. È definito di seguito.

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

Step 5 - Read data - Abbiamo già creato il file data.csvfile nei nostri esempi precedenti. Lo stesso file che abbiamo usato qui.

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

Ora leggi il file sopra usando il codice qui sotto.

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

Step 6 - Set domain - Ora, imposta il dominio utilizzando la codifica di seguito.

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

Step 7 - Add X-axis- Ora puoi aggiungere l'asse X alla trasformazione. È mostrato di seguito.

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

Step 8 - Add Y-axis - Aggiungi l'asse Y alla trasformazione utilizzando il codice riportato di seguito.

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

Step 9 - Append group elements - Ora, aggiungi gli elementi del gruppo e applica la trasformazione all'asse Y come definito di seguito.

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

Step 10 - Select the bar class - Ora seleziona tutti gli elementi nella classe bar come definito di seguito.

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver) 
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

Qui, abbiamo aggiunto l'evento listener per il mouseout e il mouseover per eseguire l'animazione. Applica l'animazione, quando il mouse passa su una barra particolare e ne esce. Queste funzioni vengono spiegate nel passaggio successivo.

Il .ease(d3.easeLinear)viene utilizzata per eseguire il movimento apparente nell'animazione. Elabora il movimento di rallentamento e rallentamento con una durata di 200. Il ritardo può essere calcolato utilizzando -

.delay(function (d, i) {
   return i * 25;
})

Step 11 - Mouseover event handler function - Creiamo un gestore di eventi mouseover per gestire un evento mouse come mostrato di seguito.

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val') 
   
   .attr('x', function() {
      return x(d.year);
   })
   
   .attr('y', function() {
      return y(d.value) - 10;
   })
}

Qui, nell'evento mouseover, vogliamo aumentare la larghezza e l'altezza della barra e il colore della barra selezionata in rosso. Per il colore, abbiamo aggiunto una classe di "evidenziazione", che cambia il colore della barra selezionata in rosso.

Una funzione di transizione alla barra per la durata di 200 millisecondi. Quando aumentiamo la larghezza della barra di 5px e l'altezza di 10px, il passaggio dalla larghezza e altezza precedenti della barra alla nuova larghezza e altezza avrà una durata di 200 millisecondi.

Successivamente, abbiamo calcolato un nuovo valore "y" sulla barra, in modo che la barra non si distorca a causa del nuovo valore di altezza.

Step 12 - Mouseout event handler function- Creiamo un gestore di eventi mouseout per gestire un evento del mouse. È definito di seguito.

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');
   
   d3.select(this)
      .transition()     
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });
   
   d3.selectAll('.val')
      .remove()
}

Qui, nell'evento mouseout, vogliamo rimuovere le funzionalità di selezione che avevamo applicato nell'evento mouseover. Pertanto, ripristiniamo la classe bar alla classe 'bar' originale e ripristiniamo la larghezza e l'altezza originali della barra selezionata e ripristiniamo il valore y al valore originale.

Il d3.selectAll(‘.val’).remove() viene utilizzata per rimuovere il valore di testo che avevamo aggiunto durante la selezione della barra.

Step 13 - Working Example- Il programma completo è fornito nel seguente blocco di codice. Crea una pagina webanimated_bar.html e aggiungi le seguenti modifiche.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }
        
         .highlight {
            fill: red;
         }
         
         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }
               
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

Se selezioniamo una barra, verrà evidenziata in rosso. D3 è una libreria di visualizzazione generica che si occupa della trasformazione dei dati in informazioni, documenti, elementi, ecc. E, infine, aiuta nella creazione della visualizzazione dei dati.