Protovis contro D3.js


84

TLDR: Qualcuno ha esperienza sia di protovis che di D3.js per chiarire le differenze tra i due?

Ho giocato con Protovis nelle ultime 2 settimane ed è stato fantastico finora. Tranne che ora mi sembra di aver colpito un po 'un muro di mattoni con l'animazione.

protovis: http://vis.stanford.edu/protovis/

Voglio fare un'animazione abbastanza semplice, ma con protovis sembra meno che intuitivo - sto iniziando a pensare che protovis non sia mai stato pensato per l'animazione. Quindi, ho iniziato a guardare D3.js:

http://mbostock.github.com/d3/ex/stack.html

Sembra molto simile, ma:

  • Sembra più leggero
  • Sembra orientato all'interazione con altri elementi DOM e SVG
  • Sembra orientato all'aggiunta di animazioni

Qualcuno può chiarire altre differenze?

Sarei molto grato per qualsiasi contributo

Risposte:


117

Ho lavorato molto con Protovis e alcune cose con D3. Oltre ai punti che hai menzionato, penso che le seguenti differenze si distinguano per me:

  • Laddove Protovis fornisce un livello di astrazione semplificato tra le proprietà visive che stai specificando, D3 utilizza le specifiche CSS e DOM effettive, quindi invece di .width(10)o .fillStyle('#00C')useresti .style('width', 10)o .attr('fill', '#00C'). In questi esempi, la differenza è piuttosto banale, ma quando fai qualcosa come disegnare una linea in un'immagine SVG, ci sono grandi differenze. Il risultato è che l'uso di D3 può sembrare un po 'più basso: hai più controllo, ma devi avere abbastanza familiarità con la sintassi SVG per fare alcune delle cose che Protovis fa molto più facilmente.

  • Come noti, Protovis è tutto renderizzato in SVG, mentre D3 può utilizzare altre parti del DOM. Ciò significa che, per le visualizzazioni che non richiedono elementi visivi basati su SVG, puoi utilizzare D3 anche con browser che non supportano SVG. Significa anche che è molto più facile integrare HTML e SVG nella stessa visualizzazione, il che è davvero bello per cose come la gestione del testo (la manipolazione del testo e il layout sono piuttosto deboli in Protovis).

  • D3 modifica o elimina alcune delle utilità di base di Protovis come le scale e la manipolazione dei dati. Sono ripetutamente infastidito dal fatto che le utilità di base come pv.sum()o pv.mean()non abbiano equivalenti D3, anche se alcune, come .nest(), sono condivise tra le due librerie. Modifica 10/1/12: D3 ha compilato la sua utilità di dati, ma ci sono ancora alcuni che Protovis comprende e D3 non lo fa, ad esempio pv.dict, pv.numeratee pv.repeat. Presumibilmente furono tralasciati perché considerati generalmente meno utili.

  • D3 fornisce utilità per richieste asincrone. Quando voglio questo in Protovis, generalmente devo usare una libreria esterna (cioè jQuery).

  • La documentazione dell'API D3 è quasi completamente incompleta, rispetto ai documenti abbastanza dettagliati per Protovis. Modifica (30/8/13) : D3 ora ha una documentazione API completa e dettagliata su GitHub , quindi questo punto non è più rilevante.

  • Infine, non ho fatto molto con l'animazione, ma penso che tu abbia perfettamente ragione: D3 fornisce più supporto per l'animazione rispetto a Protovis, specialmente in termini di transizioni animate. Protovis può eseguire nuovamente il rendering di alcune o tutte le visualizzazioni su richiesta, ma non ha alcun supporto per passare attraverso un'animazione di durata limitata: dovresti codificare tutto a mano setInterval. D3 sembra renderlo una parte molto più integrante della libreria.

Modifica (7/12/11) : Sembra che ci sia una nuova grande differenza: dal 28 giugno 2011, Protovis non è più in fase di sviluppo attivo e il team di Protovis sta invece spingendo D3.js. L'ultima versione è abbastanza stabile, quindi questo non dovrebbe impedirti di usarla, ma è sicuramente un punto da considerare.


Abbastanza corretto, tranne per il terzo punto. Puoi incorporare un'immagine Protovis in un elemento HTML arbitrario.
Geoff

@ Jeff - Potrei aver esagerato il caso. Il punto era che D3 è progettato per funzionare con elementi arbitrari, mentre per farlo con Protovis (AFAIK) è necessario lavorare al di fuori dell'API stabilita (ad esempio impostando la $domproprietà root ). Ridurrò quel punto.
nrabinowitz

1
@ Jeff - Ripensandoci, sto abbandonando completamente quel punto - in qualche modo non avevo mai notato la Panel#canvasproprietà. Grazie per la nota.
nrabinowitz

Grazie mille per la risposta dettagliata - che è stata davvero utile
di Richard Powell il

2
da marzo 2013, il riferimento API per v3 di D3 sembra essere completo e fa davvero una buona impressione. Inoltre, c'è una buona documentazione con molti tutorial e bei esempi.
Mobiletainment

32

C'è un tutorial che copre le differenze tra D3 e Protovis in alcuni dettagli. Sono d'accordo con la descrizione di @ nrabinowitz, anche se sottolineo che abbiamo recentemente aggiunto un'ampia documentazione API .


1
Sì, l'ho notato solo ieri (molto apprezzato!). Aggiornerò la mia risposta per i posteri :).
nrabinowitz

6

C'è un recente documento degli autori di Protovis / d3.js pubblicato nel 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf principalmente su d3.js ma contenente alcuni dei motivi per cui hanno cambiato alcuni cose in arrivo da Protovis a d3.js.


Ho trovato utile quel foglio . Senza fare alcun test, mi fa capire dove funziona e dove è imperfetto. Grazie.
Mike Gale
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.