D3.js: differenze tra le versioni

Versione delle 10:45, 23 mar 2015

Versione attuale delle 00:31, 9 lug 2024

(25 versioni intermedie di 19 utenti non mostrate)

Riga 5:

|Didascalia =

|Sviluppatore = Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and community

|UltimaVersione = 3.5.5

|DataUltimaVersione = {{Start date and age|2015|02|10|df=yes/no}}<ref>{{cita web|titolo=d3 Releases|url=https://github.com/mbostock/d3/releases|accesso=10 febbraio 2015}}</ref>

|UltimaVersioneBeta =

|DataUltimaVersioneBeta =

|SistemaOperativo = multipiattaforma

|Linguaggio = javascript

|Stato sviluppo = Attivo

|Genere = Librerialibreria softwarejavascript

|Licenza = [[Berkeley_Software_Distribution|BSD]]

|SoftwareLibero = sì

|Lingua =

}}

|SitoWeb = http://d3js.org/

}}{{Citazione|Documenti creati dai dati|nome|Data-Driven Documents|lingua=en}}

'''D3.js''' (o solo '''D3''' per '''Data-Driven Documents''') è una libreria [[JavaScript]] per creare visualizzazioni dinamiche ed interattive partendo da dati organizzati, visibili attraverso un comune [[Browser|browser]].
Per fare ciò si serve largamente degli standard web: [[Scalable Vector Graphics|SVG]], [[HTML5]], e [[Cascading Style Sheets|CSS]]. È il successore del precedente framework [[Protovis]].<ref>{{cita pubblicazione |url=httphttps://mbostock.github.com/d3/tutorial/protovis.html |titolo=For Protovis Users |operapubblicazione=D3.js |accesso=18 agosto 2012 |urlarchivio=https://web.archive.org/web/20120806072124/http://mbostock.github.com/d3/tutorial/protovis.html |urlmorto=sì }}</ref> Diversamente da molte altre librerie, D3 permette un ottimo controllo e resa visiva sul risultato finale.<ref name="Viau_2012/06">{{cita pubblicazione |url=http://www.datameer.com/blog/author/cviau |titolo=What’s behind our Business Infographics Designer? D3.js of course |cognome=Viau |nome=Christophe |operapubblicazione=[[Datameer]]'s blog |data=26 giugno 2012 |accesso=18 agosto 2012 |urlmorto=sì |urlarchivio=https://web.archive.org/web/20150923212800/http://www.datameer.com/blog/author/cviau }}</ref>
Il suo sviluppo è iniziato nel 2011,<ref>{{cita pubblicazione|url=http://books.google.com/books?id=nTpjoNgJQOMC |titolo=Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations |nome1=Glenn J. |cognome1=Myatt |nome2=Wayne P. |cognome2=Johnson |chapter-urlurlcapitolo=http://books.google.com/books?id=nTpjoNgJQOMC&pg=SL1-PA2 |capitolo=5.10 Further reading |paginap=A–2 |editore=[[John Wiley & Sons]] |placecittà=Hoboken, New Jersey |data=settembre 2011 |ISBN=978-0-470-53649-0|accesso=23 gennaio 2013 }}</ref> e la versione 2.0.0 uscì ad agosto 2011.<ref>{{cita pubblicazione|url=https://github.com/mbostock/d3/wiki/Release-Notes |titolo=Release Notes |operapubblicazione=D3.js |accesso=22 agosto 2012 }}</ref><ref>{{cita web|titolo=d3 Releases|url=https://github.com/mbostock/d3/releases|accesso=10 febbraio 2015}}</ref>

== Funzionamento principale ==

La libreria JavaScript D3, incorporata in una pagina web [[HTML]], utilizza funzioni JavaScript prefatte per selezionare elementi del DOM, creare elementi SVG, aggiungergli uno stile grafico, oppure transizioni, effetti di movimento e/o [[Tooltip| tooltip]]. Questi oggetti possopossono essere largamente personalizzati utilizzando lo standard web dei "fogli di stile a cascata", chiamati in inglese [[Cascading Style Sheets|CSS]]. In questo modo grandi collezioni di dati possono essere facilmente convertiti in oggetti SVG usando semplici funzioni di D3 e così generare ricche rappresentazioni grafiche di numeri, testi, mappe e diagrammi. I dati utilizzati possono essere in diversi formati, il più comune è il [[JSON]], valori separati da virgola [[Comma-separated_valuesseparated values|CSV]] o [[geoJSON]], ma, se necessario, disi possono scrivere funzioni JavaScript apposta per leggere dati in altri formati.

=== Selezioni ===

Il concetto centrale del design di D3 è permettere al programmatore di usare dei selettori, come per i CSS, per scegliere i nodi all'interno del DOM [[Document Object Model]] e quindi usare operatori per manipolarli, similmente alla libreria [[jQuery]] (see {{harvnb|Bostock|Ogievetsky|Heer|2011}}, chap. 3). Per esempio, usando D3, uno può selezionare tutti gli elementi {{tag|p}} della pagina HTML e quindi cambiare il loro colore, per esempio, in fucsia:

<sourcesyntaxhighlight lang="javascript">

d3.selectAll("'p"') // seleziona tutti gli elementi <p>

.style("'color"', "'violet"') // imposta la chiave: "'color"' con il valore: "'violet"'

.attr("'class"', "'squares"') // imposta l'attributo "'class"' con il valore "'squares"'

.attr("'x"', 50); // imposta l'attributo "'x"' con il valore 50px

</syntaxhighlight>

</source>

La selezione può essere basata su tag (come nell'esempio qui sopra), elementi, classi, identificatori, attributi o punti della gerarchia.

Una volta che gli elementi sono selezionati possiamo apllicareapplicare operazioni su di essi.

Questo comprende leggere ed impostare attributi, mostrare testi, formattare (come nell'esempio precedente).

Gli elementi possono anche essere aggiunti e rimossi. Questo processo di modifica, creazione ed eliminazione di elementi HTML, può essere eseguito in base ai set di dati forniti, che è il concetto di base di D3.js.

=== Aggiunta di nodi utilizzando dati ===

Una volta che un set di dati viene associato a un documento, l'utilizzo di D3.js generalmente segue un modello secondo il quale per ogni elemento dell'insieme di dati associato vengono invocate una funzione esplicita <code>.enter()</code>, una funzione implicita "<code>update</code>" e una esplicita <code>.exit()</code>. Tutti i metodi concatenati dopo il comando <code>.enter()</code> verranno chiamati per ciascun elemento dell'insieme di dati per i quali non sia già presente un nodo DOM nella selezione (il <code>selectAll()</code> mostrato precedentemente). Allo stesso modo, la funzione di aggiornamento implicita viene chiamata su tutti i nodi selezionati esistenti per i quali esiste un elemento corrispondente nell'insieme di dati, e viene chiamata la <code>.exit()</code> su tutti i nodi selezionati esistenti che non abbiano un elemento nel set di dati a loro collegato. La documentazione D3.js fornisce diversi esempi di come funziona questo meccanismo.

== Struttura delle API ==

L'API di D3.js è fatta da diverse migliaia di funzioni, che possono essere raggruppate nelle seguenti unità logiche:<ref>{{Cita web|autore=d3|url=https://github.com/d3/d3/wiki/API-Reference|titolo=API Reference · d3/d3 Wiki · GitHub|sito=Github.com|data=30 giugno 2016|accesso=1º agosto 2016}}</ref>

* Selezioni

* Transizioni

* Array

* Matematiche

* Colori

* Scale

* SVG

* Orari

* Layout

* Geografia

* Geometria

* Comportamenti

== Librerie e strumenti simili ==

Line 53 ⟶ 67:

== Note ==

<references/>

{{References}}

== Altri progetti ==

{{interprogetto}}

== Collegamenti esterni ==

* {{Collegamenti esterni}}

{{Controllo di autorità}}

{{Portale|software libero}}