d3.js
Rendere robusto, reattivo e riutilizzabile (r3) per d3

introduzione

Trama di dispersione

Questo esempio contiene oltre 1000 righe di codice in totale (troppo da includere qui). Per questo motivo, tutto il codice è accessibile su http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 (alternativamente ospitato su https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Nota bl.ocks.org usa iframe per vedere il ridimensionamento dovrai fare clic sul pulsante apri (angolo in basso a destra dell'iframe). Dato che c'è molto codice, è stato suddiviso in più file e il segmento di codice pertinente farà riferimento sia al nome del file che al numero di riga. Per favore apri questo esempio mentre lo attraversiamo.

Cosa fa un grafico?

Ci sono diversi componenti principali che vanno in qualsiasi grafico completo; precisamente questi includono:

• titolo
• assi
• etichette degli assi
• i dati

Ci sono altri aspetti che potrebbero essere inclusi a seconda del grafico, ad esempio una legenda del grafico. Tuttavia, molti di questi elementi possono essere aggirati con il suggerimento. Per questo motivo sono presenti elementi grafici interattivi specifici, ad es. Pulsanti per passare da un dato all'altro.

Dal momento che il contenuto del nostro grafico sarà interattivo, sarebbe opportuno che il grafico stesso fosse dinamico, ad esempio ridimensionamento quando le dimensioni della finestra cambiano. SVG è scalabile, quindi puoi semplicemente consentire la scalabilità del grafico mantenendo la prospettiva attuale. Tuttavia, a seconda della prospettiva impostata, il grafico potrebbe diventare troppo piccolo per essere leggibile anche se c'è ancora spazio sufficiente per il grafico (ad esempio se la larghezza è maggiore dell'altezza). Pertanto potrebbe essere preferibile ridisegnare il grafico nelle dimensioni rimanenti.

Questo esempio spiega come calcolare dinamicamente la posizione dei pulsanti, titolo, assi, etichette degli assi, nonché gestire i set di dati di quantità variabili di dati

Impostare

Configurazione

Poiché puntiamo al riutilizzo del codice, dovremmo creare un file di configurazione che contenga opzioni globali per gli aspetti del nostro grafico. Un esempio di tale file di configurazione è charts_configuration.json .

Se guardiamo questo file, possiamo vedere che ho incluso diversi elementi che dovrebbero avere già un chiaro uso per quando realizziamo il nostro grafico:

• file (memorizza la stringa dove sono conservati i dati del nostro grafico)
• document_state (quale pulsante è attualmente selezionato per il nostro grafico)
• chart_ids (id HTML per i grafici che faremo)
• svg (opzioni per il svg, ad esempio la dimensione)
• plot_attributes
  • titolo (imposta vari attributi di carattere)
  • tooltip (imposta varie proprietà dello stile tooltip)
  • assi (imposta vari attributi dei font)
  • pulsanti (imposta vari caratteri e attributi di stile)
• trame
  • scatter (imposta vari aspetti del nostro grafico a dispersione, ad es. raggio di punti)
• colori (una tavolozza di colori specifica da usare)

Funzioni di supporto

Oltre a impostare questi aspetti globali, è necessario definire alcune funzioni di supporto. Questi possono essere trovati sotto helpers.js

• ajax_json (carica i file JSON sia in modo sincrono che asincrono)
• keys (restituisce le chiavi dell'oggetto dato - equivalente a d3.keys ())
• parseNumber (un numero generale di analisi nel caso in cui non si conosca il tipo o il numero)
• typeofNumber (restituisce il tipo di numero)

index.html

Infine, dovremmo impostare il nostro file html. Ai fini di questo esempio, inseriremo il nostro grafico in un tag di section cui l' id corrisponde all'ID fornito nel file di configurazione (riga 37). Poiché le percentuali funzionano solo se possono essere calcolate dal membro principale, includiamo anche alcuni stili di base (righe 19-35)

Fare la nostra trama a dispersione

Apriamo make_scatter_chart.js . Ora prestiamo molta attenzione alla linea 2, in cui molte delle variabili più importanti sono predefinite:

• svg - d3 selezione del svg del grafico
• chart_group - selezione d3 del gruppo all'interno dello svg in cui saranno posizionati i dati
• canvas - aspetti fondamentali dell'estrazione svg per comodità
• margini - i margini che dobbiamo prendere in considerazione
• maxi_draw_space i valori xey più grandi in cui possiamo disegnare i nostri dati
• doc_state: lo stato corrente del documento se utilizziamo i pulsanti (in questo esempio siamo)

Avrai notato che non abbiamo incluso lo svg nell'html. Quindi, prima di poter fare qualsiasi cosa con il nostro grafico, dobbiamo aggiungere lo svg a index.html se non esiste ancora. Questo è ottenuto nel file make_svg.js dalla funzione make_chart_svg . Guardando a make_svg.js vediamo che usiamo la funzione di aiuto parseNumber nella configurazione del grafico per la larghezza e l'altezza dello svg. Se il numero è un float, rende la larghezza e l'altezza dello svg proporzionale alla larghezza e all'altezza della sua sezione. Se il numero è un numero intero, verrà semplicemente impostato su tali numeri interi.

Righe 6 - 11 test per vedere - in effetti - se questa è la prima chiamata o meno e imposta il chart_group (e lo stato del documento se è la prima chiamata).

La riga 14 - 15 estrae i dati attualmente selezionati dal pulsante cliccato; la riga 16 imposta data_extent . Mentre d3 ha una funzione per estrarre l'estensione dei dati, è mia preferenza memorizzare l'estensione dei dati in questa variabile.

Le righe 27 - 38 contengono la magia che crea il nostro grafico facendo i margini, i pulsanti, il titolo e gli assi. Questi sono tutti determinati dinamicamente e potrebbero sembrare un po 'complessi, quindi li esamineremo a turno.

make_margins (in make_margins.js)

Possiamo vedere che l'oggetto Margini tiene conto di uno spazio a sinistra, a destra, in alto e in basso del grafico (x.left, x.right, y.top, y.bottom rispettivamente), il titolo, i pulsanti e gli assi.

Vediamo anche che i margini degli assi sono aggiornati nella riga 21.

Perché lo facciamo? Beh, a meno che non specifichiamo il numero di zecche, il segno di spunta indica la dimensione del segno di spunta e la dimensione del carattere dell'etichetta del segno di spunta, non siamo riusciti a calcolare la dimensione di cui hanno bisogno gli assi. Anche allora dovremmo ancora ipotizzare lo spazio tra le etichette e le zecche. Pertanto è più facile creare alcuni assi fittizi usando i nostri dati, vedere quanto sono grandi gli elementi svg corrispondenti e quindi restituire la dimensione.

In realtà, abbiamo solo bisogno della larghezza dell'asse ye dell'altezza dell'asse x, che è ciò che è memorizzato in axes.y e axes.x.

Con i nostri margini predefiniti impostati, calcoliamo quindi il max_drawing_space (righe 29-34 in make_margins.js)

make_buttons (in make_buttons.js)

La funzione crea un gruppo per tutti i pulsanti, quindi un gruppo per ciascun pulsante, che a sua volta memorizza un cerchio e un elemento di testo. La linea 37 - 85 calcola la posizione dei pulsanti. Lo fa vedendo se il testo a destra della lunghezza di ogni pulsante è più lungo dello spazio a noi consentito da disegnare (riga 75). In caso affermativo, abbassa il pulsante su una riga e aggiorna i margini.

make_title (in make_title.js)

make_title è simile a make_buttons in quanto suddividerà automaticamente il titolo del tuo grafico in più righe e sillaberà se necessario. È un po 'hacky poiché non ha la raffinatezza dello schema di sillabazione di TeX, ma funziona abbastanza bene. Se sono necessarie più righe di una, i margini vengono aggiornati.

Con i pulsanti, il titolo e i margini impostati, possiamo creare i nostri assi.

make_axes (in make_axes.js)

La logica di make_axes rispecchia quella per il calcolo dello spazio necessario per gli assi fittizi. Qui, tuttavia, aggiunge transizioni per cambiare tra gli assi.

Finalmente la nostra trama a dispersione

Con tutto ciò che è stato fatto, possiamo finalmente creare la nostra trama a dispersione. Poiché i nostri set di dati possono avere un numero diverso di punti, dobbiamo tenerne conto e sfruttare gli eventi di entrata e uscita di d3 di conseguenza. Ottenere il numero di punti già esistenti è fatto nella riga 40. L'istruzione if nella riga 45 - 59 aggiunge più elementi del cerchio se abbiamo più dati, o transiziona gli elementi extra in un angolo e poi li rimuove se ce ne sono troppi.

Una volta che sappiamo di avere il giusto numero di elementi, possiamo trasferire tutti gli elementi rimanenti nella loro posizione corretta (riga 64)

Infine aggiungiamo tooltip nella riga 67 e 68. La funzione tooltip è in make_tooltip.js

Grafico a scatola e basette

Per mostrare il valore di rendere funzioni generalizzate come quelle dell'esempio precedente (make_title, make_axes, make_buttons, ecc), considera questo riquadro e il grafico a baffi: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Mentre il codice per creare scatole e baffi è più intenso del semplice posizionamento dei punti, vediamo che le stesse funzioni funzionano perfettamente.

Grafico a barre

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248