2013-03-05 21 views
50

Sono affascinato sia da d3 che da Raffaello. Capisco che Raphael è costruito sopra D3 e che è compatibile con i browser incrociati , ma non sono sicuro quale sia più adatto a quali scenari. Qualcuno può per favore versare un po 'di luce? Il mio caso d'uso immediato è potenzialmente utilizzando la timeline SIMILE e integrandola con un diagramma di stato (per il quale intendo usare d3/Raffaele). Grazie!D3.js vs Raphael.js

+7

Raphael è stato costruito in cima alla D3? Non sono sicuro che lo sia. – Dve

risposta

41

Raphael non è costruito su D3.

Raphael ti aiuterà a disegnare elementi. D3 è più completo e ti aiuterà a legare i dati agli elementi. Quindi direi che la D3 è più potente. This forum discussion Discute sulla presentazione di una timeline SIMILE usando D3, si riferiscono a this project che implementa una timeline in D3. Quindi, a prima vista, D3 è la tua risposta.

Tuttavia, dato che non sembra esserci un widget per D3 che gestisce la timeline SIMILE per voi, Raphael o D3 potrebbero essere una buona scelta. Cioè, a parte il fatto che D3 non funziona bene con le precedenti versioni di Internet Explorer, come spiegato in this article. Quindi se hai bisogno di supportare versioni precedenti di IE, stai meglio con Raphael.

26

D3 è molto più difficile da imparare rispetto a Raphael, ma in entrambi i casi, dovrai anche imparare SVG per poter creare animazioni migliori. D'altra parte normalmente le visualizzazioni D3 richiedono meno matematica rispetto agli esempi di Processing o Raphael simili perché ci sono già molti layout preconfezionati.

Direi che D3 è la scelta migliore per un motivo ovvio: D3 è basato sullo stack standard degli standard Web (HTML, DOM - anche se lo si odia è necessario utilizzarlo, CSS, SVG, anche Canvas), ed è una libreria per lavorare con i dati. Essendo un quadro di dati, D3 anche viene imballato con:

  • tonnellate di algoritmi e layout (layout di forza, i layout pila, alberi, ecc),
  • alcuni dati di base dispute funzionalità (nidificazione, croce, gruppo da , rollup - vedere questi esempi: http://bl.ocks.org/phoebebright/raw/3176159/),
  • jQuery selezioni di stile,
  • e anche primitive di visualizzazione (d3.svg viene fornito con tutto il necessario per una grafica semplice).

Così com'è, d3 non è solo migliore di Raphael e Processing in molti casi, ma è anche una valida alternativa per jQuery, underscore.js e altri framework. Ci sono un sacco di librerie di diagrammi costruite sopra, quindi puoi sempre trascinare e rilasciare un grafico interessante e riscrivere il wrapper dati attorno ad esso.

Potete trovare alcuni buoni esempi timeline utilizzando questa interfaccia: http://biovisualize.github.com/d3visualization/#visualizationType=timeline

+2

Giusto per essere chiari qui, d3 non può essere un sostituto di jquery perché d3 non rivendica la compatibilità del browser mentre jquery possiede il ruolo del livello di compatibilità. – Core

+0

Ovviamente hai ragione, ma dipende da cosa decidono di fare i manager/sviluppatori di un determinato prodotto. Se non sono interessati alla compatibilità del browser, è facile considerare d3 anche un jQuery, underscore o altro strumento sostitutivo. – paxRoman

10

Come consulente del settore pubblico che ho trovato che l'apprendimento di Raffaello è stato un investimento migliore per me dal momento che un sacco di tempo i miei clienti utilizzano vecchie versioni di i browser. Il mio attuale cliente utilizza esclusivamente IE7 con cui Raffaello lavora perfettamente e D3 no.

Personalmente preferirei usare D3, ma professionalmente non è la realtà della mia situazione.

+2

è ancora il caso che non si possa usare molto la D3? – Nikos

15

Entrambi sono animali diversi.

RaphaelJS semplificare ed espandere le funzioni per la grafica vettoriale basata su SVG e VML.

D3js basta manipolare il DOM e fare affidamento su standard grafici (SVG e Canvas, su grafici a barre è possibile utilizzare anche DIV) per disegnare. Ad esempio d3.svg.symbol() restituisce il contenuto del parametro d per passarlo all'elemento path su SVG, ma non disegnare il simbolo da solo.

È possibile utilizzare D3js per manipolare i dati e disegnare con Raphael.

This blog spiegare come combinare D3js + Raphael. E controlla anche l'implementazione D3 for Raphael.