D3 è una grande biblioteca, il cui design piuttosto intelligente è il risultato di molti anni di ricerca. È il discendente di Protovis , una biblioteca che era già molto carina a suo tempo. Quindi l'autore, Mike Bostock, passò a qualcosa di più dinamico (le differenze sono descritte qui ).
C'è una buona dose di stranezza a prima vista in D3. Il modo in cui leghi gli elementi visivi ai dati, rispondi alle modifiche, aggiorni i grafici, ecc. Potrebbe non sembrare intuitivo all'inizio. Ma dopo alcuni esperimenti, seguendo i numerosi tutorial e leggendo la documentazione estesa, diventi molto produttivo.
In un'approssimazione del primo ordine, puoi pensare a D3 come a un canvas SVG. Ti consente di creare e manipolare, non diversamente da jQuery, il DOM SVG in modo efficiente e multi-browser. Quindi rendersi conto che è possibile, invece di creare manualmente nodi SVG, definire mappature sistematiche (cioè dichiarative) dai dati agli elementi visivi. Inoltre, D3 ti consente di personalizzare, animare, consentire all'utente di interagire con il grafico e molte altre cose.
Per quanto riguarda la tua domanda sull'architettura, penso che la domanda SO che colleghi ti risponda per la maggior parte. Sì, è un suono ed è la strada da percorrere se si desidera estrarre i dati da un RDMS.
Il modo in cui di solito progettiamo le app D3 è il seguente:
- si presume che la tua applicazione mangi i dati JSON - puoi sempre convertire altri formati in JSON sul lato server, e JSON è molto più flessibile di tutti gli altri formati (tranne forse XML ma una volta provato a
json_encode() un array PHP, non si guarda mai indietro.
- crea un file
index.html statico, inserendo il codice boostrapping necessario in un file companion app.js (e magari un CSS - le solite cose). Potresti utilizzare uno degli esempi come punto di partenza.
- crea un file
data.json statico nel formato esatto che ti aspetti che il server invii i tuoi dati. Metti alcuni dati di esempio all'interno. Puoi anche inserire questi dati JSON direttamente nello script app.js - JSON è Javascript dopotutto.
- lavora sulla tua logica di frontend, perfeziona il formato dei dati JSON, ecc. fino a quando non hai un prototipo decente.
- configura un server web semplice (ad esempio Apache), fallo servire il file JSON e fai in modo che il tuo prototipo funzioni con questo invece del file locale
- crea uno script sul lato server che generi lo stesso file "statico" (ad esempio utilizzando PHP). Metti alla prova la tua app.
- avere lo script PHP connesso al database, generare il file JSON al volo e inviarlo
Ora puoi lavorare sul miglioramento dell'applicazione: definire URL diversi per estrarre flussi di dati diversi, creare mezzi per l'utente per filtrare i dati, ecc.
Queste sono solo idee per iniziare. Il punto qui è di ridurre al minimo la quantità di modifiche tra ogni passaggio, in modo da imparare le cose una alla volta e concentrarsi sulle parti che sono davvero difficili: l'applicazione client. Associare a un server che genera dati in tempo reale è solo un passo avanti quando si ha una buona app.