Facendo riferimento a questo esempio:
http://vallandingham.me/stepper_steps.html
sembra che le librerie D3 e jQuery siano molto simili nel senso che entrambe eseguono la manipolazione DOM in modo concatenato di oggetti.
Sono curioso di sapere quali funzioni D3 rende più facile di jQuery e viceversa. Ci sono molte librerie grafiche e di visualizzazione che usano jQuery come base (ad es.Highcharts, flot, wijmo).
Fornisci esempi specifici di come sono diversi.
Risposte:
D3 è data-driven , ma jQuery non è: con jQuery di manipolare direttamente gli elementi, ma con D3 forniscono dati e callback attraverso D3 di unico data(), enter()e exit()metodi e D3 manipola elementi.
D3 viene solitamente utilizzato per la visualizzazione dei dati, ma jQuery viene utilizzato per la creazione di app Web. D3 ha molte estensioni per la visualizzazione dei dati e jQuery ha molti plugin per app web.
Entrambe sono librerie di manipolazione DOM JavaScript, hanno selettori CSS e API fluenti e si basano su standard web che le rendono simili.
Il codice seguente è un esempio di utilizzo di D3 che non è possibile con jQuery (provalo in jsfiddle ):
// create selection
var selection = d3.select('body').selectAll('div');
// create binding between selection and data
var binding = selection.data([50, 100, 150]);
// update existing nodes
binding
.style('width', function(d) { return d + 'px'; });
// create nodes for new data
binding.enter()
.append('div')
.style('width', function(d) { return d + 'px'; });
// remove nodes for discarded data
binding.exit()
.remove();d3 ha una descrizione sciocca. jQuery e d3 non sono affatto simili, semplicemente non li usi per le stesse cose.
Lo scopo di jQuery è eseguire la manipolazione generale del dominio. È un toolkit javascript generico per qualsiasi cosa tu voglia fare.
d3 è stato progettato principalmente per semplificare la creazione di grafici brillanti con i dati. Dovresti assolutamente usarlo (o qualcosa di simile, o qualcosa costruito sopra di esso) se vuoi creare visualizzazioni grafiche dei dati.
Se desideri una libreria JS per scopi generali per tutte le tue esigenze di moduli interattivi, considera jQuery o proto o mootools. Se vuoi qualcosa di piccolo, considera underscore.js. Se vuoi qualcosa con l'inserimento delle dipendenze e la testabilità, considera AngularJS.
Una guida al confronto generale da wikipedia.
Posso capire perché qualcuno potrebbe pensare che siano simili. Usano una sintassi del selettore simile - $ ('SELECTOR'), e d3 è uno strumento estremamente potente per selezionare, filtrare e operare su elementi html, specialmente mentre concatenano queste operazioni insieme. d3 cerca di spiegarti questo sulla sua home page affermando di essere una libreria di uso generale, ma il fatto è che la maggior parte delle persone la usa quando vuole creare grafici . È piuttosto insolito usarlo per la manipolazione media della dom perché la curva di apprendimento d3 è così ripida. È, tuttavia, uno strumento molto più generale di jQuery e generalmente le persone costruiscono altre librerie più specifiche (come nvd3) su d3 invece di usarlo direttamente.
Anche la risposta di @ JohnS è molto buona. API fluente = concatenamento di metodi. Sono anche d'accordo su dove i plugin e le estensioni ti portano con le librerie.
Ultimamente ho usato un po 'di entrambi. Poiché d3 utilizza i selettori di Sizzle, puoi praticamente confondere i selettori.
Tieni presente che d3.select ('# mydiv') non restituisce esattamente lo stesso di jQuery ('# mydiv'). È lo stesso elemento DOM, ma viene istanziato con diversi costruttori. Ad esempio, supponiamo di avere il seguente elemento:
<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>E prendiamo alcuni metodi comuni:
> d3.select('#mydiv').attr('rel') ;
"awesome div"
> jQuery('#mydiv').attr('rel');
"awesome div"Sembra giusto. Ma se vai un po 'oltre:
> d3.select('#mydiv').data();
[undefined]
> jQuery('#mydiv').data();
Object {hash: "654687867asaj"}.attr('data-hash', '654687867asaj')
.data()in jQuery è fondamentalmente una scorciatoia per accedere all'attributo html data-<custom-name>. Ma in D3 non ha nulla a che fare con gli attributi dei dati html, e ciò che fa in D3 è restituire una nuova selezione come unione di dati passati in argomenti con elementi già selezionati.
D3 non riguarda solo i grafici visivi. Documenti basati sui dati. Quando usi d3, colleghi i dati ai nodi dom. Grazie a SVG siamo in grado di creare grafici, ma D3 è molto di più. Puoi sostituire framework come Backbone, Angular ed Ember con l'utilizzo di D3.
Non sono sicuro di chi abbia votato, ma lasciatemi aggiungere un po 'più di chiarezza.
Molti siti Web richiedono dati dal server, che di solito proviene da un database. Quando il sito web riceve questi dati, dobbiamo fare un aggiornamento della pagina del nuovo contenuto. Molti framework lo fanno e anche d3 lo fa. Quindi, invece di usare un elemento svg, puoi usare invece l'elemento html. Quando chiami il ridisegno, aggiornerà rapidamente la pagina con il nuovo contenuto. È davvero bello non avere tutto il sovraccarico extra come jquery, backbone + i suoi plugin, angular, ecc. Hai solo bisogno di sapere d3. Ora d3 non ha un sistema di routing integrato al suo interno. Ma puoi sempre trovarne uno.
Jquery d'altra parte, il suo unico scopo è scrivere meno codice. È solo una versione breve di javascript che è stata testata su molti browser. Se non hai molto jquery sulla tua pagina web. È un'ottima libreria da usare. È semplice e richiede molti sforzi per lo sviluppo di javascript per più browser.
Se hai provato a implementare jquery in un modo simile a d3, sarà piuttosto lento, poiché non è stato progettato per quell'attività, allo stesso modo, d3 non è progettato per inviare dati ai server, è progettato solo per consumare ed eseguire il rendering dei dati .
d3 è fatto per la visualizzazione dei dati, lo fa filtrando attraverso oggetti DOM e applicando trasformazioni.
jQuery è fatto per la manipolazione del DOM e semplifica la vita per molte attività JS di base.
Se stai cercando di trasformare i dati in belle immagini interattive, D3 è fantastico.
Se stai cercando di spostare, manipolare o modificare in altro modo la tua pagina web, jQuery è il tuo strumento.
Ottima domanda!
Sebbene entrambe le librerie condividano molte delle stesse funzionalità, mi sembra che la più grande differenza tra jQuery e D3 sia il focus.
jQuery è una libreria di uso generale con l'obiettivo di essere cross-browser e di essere facile da usare.
D3 si concentra sui dati (manipolazione e visualizzazione) e supporta solo i browser moderni. E anche se sembra jQuery, è molto più difficile da usare.
Entrambi possono risolvere lo stesso scopo di creare e manipolare un DOM (sia esso HTML o SVG). D3 presenta un'API che semplifica le attività comuni che dovresti intraprendere durante la generazione / manipolazione di un DOM basato sui dati. Lo fa attraverso il suo supporto nativo per il data binding tramite la funzione data (). In jQuery dovresti elaborare manualmente i dati e definire come legarti ai dati per generare un DOM. Per questo motivo, il codice diventa più procedurale e più difficile da ragionare e seguire. Con D3, sono meno passaggi / codice e più dichiarativi. D3 fornisce anche alcune funzioni di livello superiore che aiutano a generare la visualizzazione dei dati in SVG. Funzioni come range (), domain () e scale () rendono più facile prendere dati e tracciarli su un grafico. Funzioni come axis () rendono anche più facile disegnare elementi dell'interfaccia utente comuni che ti aspetteresti in un grafico / grafico.