Ogni volta che lavoro su un progetto con le visualizzazioni, project manager di solito reagiscono in orrore quando dico che non sto a D3. Perché c’è preoccupazione? Perché dovrei scegliere di non usare D3?
Quando rispondiamo a queste domande, dobbiamo capire il contesto in cui è stato creato D3., D3 è stato rilasciato per la prima volta nel 2011, ed era abbastanza innovativo al momento.
Normalmente quello che vedresti sono le librerie che forniscono grafici pronti all’uso e con un enorme elenco di opzioni. Questo può funzionare, ma il problema è che ogni volta che qualcuno ha un nuovo requisito, un’opzione dovrebbe essere aggiunta e supportata. Alla fine si finisce con ciò che è effettivamente un linguaggio in cui si utilizzano diversi oggetti per definire un grafico. D3 ha adottato un approccio diverso, invece di darti i componenti completi, ti dà funzioni di supporto basate sui dati per creare tu stesso quei componenti.,
In questo momento, librerie come jQuery e Backbone erano popolari. Creare i propri grafici utilizzando queste librerie sarebbe stato impegnativo, soprattutto se si desidera che siano dinamici. I browser stavano solo adottando nuovi standard CSS moderni come le transizioni e proprietà più moderne come flex box erano ancora lontane dall’essere implementate.
D3 ha risolto molti di questi problemi, ed era senza dubbio l’approccio più semplice per implementare le visualizzazioni all’epoca. Tuttavia, molto è cambiato da allora., Abbiamo nuovi framework moderni che utilizzano concetti più flessibili ed espressivi come virtual DOM, e CSS ha così tante nuove funzionalità per il layout e le animazioni.
Invece di saltare automaticamente a D3, permettetemi di elencare alcuni motivi per cui dovreste riconsiderare il vostro uso di esso.
Ho lavorato con D3 numerose volte negli ultimi anni e ho implementato tutti i tipi di visualizzazioni con esso. Capisco i concetti generali su D3 e faccio ancora fatica a lavorarci. Tutti quelli con cui ho lavorato, dagli juniores agli sviluppatori senior, lottano anche con esso., Quello che fanno molte persone, incluso me stesso, è che troviamo un esempio online che corrisponde approssimativamente a quello che stiamo cercando e modifichiamo l’esempio in base alle nostre esigenze.
Se vogliamo aggiungere alcune funzionalità personalizzate, probabilmente faremo qualche ricerca in più e troveremo qualcosa che sembra corretto, tenteremo di capire come funziona e continueremo a modificarlo fino a quando non farà ciò che vogliamo che faccia.
Ti suona familiare? D’altra parte, gli sviluppatori in questi giorni hanno molta familiarità con le librerie DOM virtuali e hanno familiarità con i modelli., Non ha più senso sfruttare queste abilità, piuttosto che introdurre una libreria che richiede un modo di pensare completamente diverso?
È più facile di quanto pensi
Quando pensi per la prima volta di creare i tuoi grafici da zero, è comune sentirsi preoccupato e terrorizzato. Potrebbe sembrare un componente molto complicato da creare, ma in realtà non lo è quando lo scomponi. Prendiamo un esempio di un grafico a linee. Ecco come si farebbe un grafico a linee in D3:
Fonte: bl.ocks.,org
Ecco come vorrei fare qualcosa di simile utilizzando Preact:
E il CSS:
Fonte: JSFiddle
C’è un bel po ‘ di codice, ma sto solo utilizzando gli strumenti già a disposizione, in questo caso, il mio punto di vista una biblioteca, che è Preact (può essere qualsiasi cosa, però, Reagire, Vue, Angolari, ecc), e moderno CSS strumenti come flexbox.,
L’esempio D3 richiede l’apprendimento di molti concetti su D3. Quest’ultimo richiede solo l’utilizzo delle conoscenze che hai già sulla tua libreria di visualizzazioni. Direi che è più facile da mantenere rispetto all’esempio D3, poiché chiunque conosca la libreria view dovrebbe essere in grado di saltare nella base di codice e iniziare a apportare modifiche.
Non dimenticare la dimensione del bundle
A seconda del tipo di grafico e di quanto tree-shaking può ottimizzare il tuo bundle, D3 nel peggiore dei casi importerà 70+ KB di codice. Questo può avere impatti sul caricamento del tuo sito., Quindi, mentre è vero che stai scrivendo più codice rispetto all’esempio D3 originale, nel complesso stai distribuendo meno codice rispetto a se avessi usato D3.
In generale, quando si utilizza il codice di terze parti, è sempre importante ricordare i costi di utilizzo di tale codice. Se si richiede solo una singola funzione da una libreria, si importa l’intera libreria per tale funzionalità?, Sì, non dovresti sempre reinventare la ruota, ma devi considerare il tempo per imparare quella libreria, la dimensione che aggiunge al tuo bundle, la licenza di quella libreria, il supporto che la libreria avrà, l’affidabilità dei manutentori, la capacità di correggere i bug in modo tempestivo, ecc.
Canvas e HTML sono spesso migliori di SVG
Se hai notato nell’esempio precedente, abbiamo usato una combinazione di HTML e SVG. Per qualche ragione, le persone cercheranno di implementare interi grafici usando SVG, ma non c’è davvero bisogno di farlo. CSS è molto più potente di SVG in questi giorni.,
Ad esempio, SVG non supporta nativamente il wrapping del testo. Se volessimo eseguire il wrapping del testo, dovremmo calcolarlo in JavaScript:
Source: bl.ocks.org
Con HTML d’altra parte, finché white-space è impostato su normal, si avvolgerà naturalmente.
Elementi come cerchi e rettangoli possono essere fatti in HTML e CSS. È possibile utilizzaretransform eborder-radius per creare tutti i tipi di forme., Se si desidera eseguire un grafico a barre in D3 con due angoli arrotondati, non è possibile utilizzare rect perché arrotonderà tutti e quattro gli angoli, invece dei due angoli che si desidera arrotondare. La tua unica opzione sarebbe usare path.
L’unica ragione per cui userei i tag SVG è a causa del tag path. È ancora l’unico modo pulito di creare forme arbitrarie senza equivalenti HTML.
Se hai bisogno di prestazioni extra, c’è anche il tag canvas da considerare., Con canvas dovrai codificare le interazioni di base da solo, ma ha il vantaggio di non avere il sovraccarico di HTML o SVG che può consumare memoria ed essere più lento da aggiornare. È possibile aggiornare i singoli pixel sulla tela come si desidera, in modo da ottimizzare la visualizzazione e ridimensionarla. Le nuove API del browser come OffscreenCanvas contribuiranno anche a migliorare le prestazioni quando utilizzate all’interno dei lavoratori.
Ma Canvas non scala come SVG?,
Una cosa molto comune che ho sentito abbastanza spesso, è che canvas non è adatto per le visualizzazioni perché non scala così come SVG. Nell’uso normale della tela, se si ingrandisce o rimpicciolisce una pagina o si utilizza un browser con un display DPI più alto, la tela uscirà pixelata e sfocata.
Questo accade perché quando crei la tua tela, devi definire quanti pixel vuoi che la tua tela disegni., Quando impostiamo gli attributi widtheheight potrebbe sembrare che stiamo impostando la dimensione CSS, ma in realtà stiamo impostando la dimensione dello spazio di disegno su tela. Queste non sono la stessa cosa.
Normalmente i tuoi pixel CSS sarebbero impostati alla stessa dimensione dello spazio di disegno su tela, ma quando ingrandisci / riduci con il tuo browser, vedrai di nuovo lo stesso problema. La soluzione è usare window.devicePixelRatio e ridimensionare lo spazio di disegno su tela.
Fonte: JSFiddle
Utilizzando il rapporto pixel, possiamo aumentare lo spazio di disegno per la tela. Ma aumentare lo spazio di disegno non è sufficiente, dobbiamo anche dire alla tela che le future operazioni di disegno devono essere ridimensionate al rapporto pixel. Questo risolverà quindi tutti i problemi di ridimensionamento.,
Puoi dire quali sono canvas e quali sono SVG?
Conclusione
Come puoi vedere, ci sono numerose ragioni per cui D3 è abbastanza obsoleto ora per molti casi d’uso comuni. Il web si è evoluto in modo significativo dal suo rilascio., Se stai facendo grafici semplici come ciambelle, grafici a barre, grafici a linee, grafici a dispersione, ecc. Non c’è nulla che D3 ti fornirà per quei casi d’uso. In termini di manutenzione, il codice sarà probabilmente più manutenibile piuttosto che più difficile da mantenere, e se è necessario apportare modifiche, dovrebbe essere banale apportare tali modifiche.
Non c’è motivo per i product manager di sentirsi preoccupati di non usare D3, e non dovresti nemmeno essere preoccupato.
Grazie per la lettura!,
Aggiornamenti
- Articolo aggiornato per aggiungere ” Ma Canvas non scala come SVG?” sezione.