D3.js - Concetti

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.