Was ist der Unterschied zwischen D3 und jQuery?

103

Bezugnehmend auf dieses Beispiel:

http://vallandingham.me/stepper_steps.html

Es scheint, dass die D3- und jQuery-Bibliotheken in dem Sinne sehr ähnlich sind, dass beide DOM-Manipulationen auf objektverkettete Weise durchführen.

Ich bin gespannt, welche Funktionen D3 einfacher macht als jQuery und umgekehrt. Es gibt viele Grafik- und Visualisierungsbibliotheken, die jQuery als Grundlage verwenden (z., , ).

Bitte geben Sie konkrete Beispiele dafür, wie sie sich unterscheiden.

zcaudate
quelle

Antworten:

92
  • D3 ist datengesteuert , jQuery jedoch nicht: Mit jQuery manipulieren Sie Elemente direkt , aber mit D3 stellen Sie Daten und Rückrufe über D3s Unique bereitdata() , enter()und exit()Methoden und D3 manipulieren Elemente.

  • D3 wird normalerweise für die Datenvisualisierung verwendet, jQuery wird jedoch zum Erstellen von Webanwendungen verwendet. D3 hat viele Datenvisualisierungserweiterungen und jQuery hat viele Web-App-Plugins.

  • Beide sind JavaScript-DOM-Manipulationsbibliotheken, haben CSS-Selektoren und eine fließende API und basieren auf Webstandards, wodurch sie ähnlich aussehen.

Der folgende Code ist ein Beispiel für die Verwendung von D3, die mit jQuery nicht möglich ist (versuchen Sie es 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();
Ali Shakiba
quelle
9
schön, ein Beispiel sagt mehr als 1000 Worte
TMG
59

d3 hat eine dumme Beschreibung. jQuery und d3 sind überhaupt nicht ähnlich, Sie verwenden sie nur nicht für die gleichen Dinge.

Der Zweck von jQuery besteht darin, allgemeine Dom-Manipulationen durchzuführen. Es ist ein universelles Javascript-Toolkit für alles, was Sie tun möchten.

d3 wurde in erster Linie entwickelt, um das Erstellen glänzender Diagramme mit Daten zu vereinfachen. Sie sollten es auf jeden Fall verwenden (oder etwas Ähnliches oder etwas, das darauf aufgebaut ist), wenn Sie grafische Visualisierungen von Daten erstellen möchten.

Wenn Sie eine Allzweck-JS-Bibliothek für alle Ihre interaktiven Formularanforderungen benötigen, sollten Sie jQuery, Proto oder Mootools in Betracht ziehen. Wenn Sie etwas Winziges wollen, ziehen Sie underscore.js in Betracht. Wenn Sie etwas mit Abhängigkeitsinjektion und Testbarkeit wünschen, ziehen Sie AngularJS in Betracht.

Eine allgemeine Vergleichsanleitung aus Wikipedia.

Ich kann sehen, warum jemand denken würde, dass sie ähnlich sind. Sie verwenden eine ähnliche Selektorsyntax - $ ('SELECTOR'), und d3 ist ein äußerst leistungsfähiges Werkzeug zum Auswählen, Filtern und Bearbeiten von HTML-Elementen, insbesondere beim Verketten dieser Operationen. d3 versucht, Ihnen dies auf seiner Homepage zu erklären, indem es behauptet, eine Allzweckbibliothek zu sein. Tatsache ist jedoch, dass die meisten Benutzer es verwenden, wenn sie Diagramme erstellen möchten . Es ist ziemlich ungewöhnlich, es für eine durchschnittliche Dom-Manipulation zu verwenden, da die d3-Lernkurve so steil ist. Es ist jedoch ein weitaus allgemeineres Tool als jQuery, und im Allgemeinen erstellen die Benutzer andere spezifischere Bibliotheken (wie z. B. nvd3) auf d3, anstatt es direkt zu verwenden.

Die Antwort von @ JohnS ist auch sehr gut. Fließende API = Methodenverkettung. Ich stimme auch zu, wohin die Plugins und Erweiterungen Sie mit den Bibliotheken führen.

Fall
quelle
1
@zcaudate, d3 ist nicht auf dem Link, weil es so spezialisiert ist. Dieser Link vergleicht nur allgemeine Rahmenbedingungen.
Fall
1
Die andere Sache, die ich hinzufügen möchte, ist, dass D3 eine SVG (Scalable Vector Graphics) erstellt. Dies ist großartig, da die Größe der Dinge leicht geändert werden kann und leicht proportional zu den anderen Elementen bleibt. Obwohl Sie in JQuery möglicherweise dasselbe erreichen können (wie im Beispiellink des OP gezeigt), sollen sie sich nicht gegenseitig ersetzen.
EnigmaRM
2
Sie sind insofern ähnlich, als sie beide auf Sizzle ausgeführt werden und dieselben Selektoren verwenden (großer Teil jedes Frameworks). Nach der Auswahl konstruieren sie jedoch sehr unterschiedliche DOM-Manipulationsobjekte.
Kammerherr
5
+1 für eine dumme Beschreibung. Ich recherchiere viele clientseitige Bibliotheken und Komponenten, aber ich habe den ersten Satz auf ihrer Website nicht hinter mich gebracht, bevor ich mich völlig verloren gefühlt habe. Ich klickte auf das schicke esoterische sechseckige Mozaic der 'Dinge' und es brachte mich an einen mysteriösen und nicht verwandten Ort. Da ich nicht verstehe, was hier vor sich geht, gehe ich davon aus, dass ich des d3-Clubs nicht würdig bin. Als solches werde ich abnehmen und in den Westen gehen und d3-weniger bleiben.
Jonathan Neufeld
13

Ich habe in letzter Zeit ein wenig von beidem benutzt. Da d3 die Selektoren von Sizzle verwendet, können Sie die Selektoren so ziemlich verwechseln.

Denken Sie daran, dass d3.select ('# mydiv') nicht ganz dasselbe zurückgibt wie jQuery ('# mydiv'). Es ist das gleiche DOM-Element, aber es wird mit verschiedenen Konstruktoren instanziiert. Angenommen, Sie haben das folgende Element:

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

Und lassen Sie uns einige gängige Methoden anwenden:

> d3.select('#mydiv').attr('rel') ;
 "awesome div"

> jQuery('#mydiv').attr('rel');
 "awesome div"

Klingt plausibel. Aber wenn Sie etwas weiter gehen:

> d3.select('#mydiv').data();
 [undefined]

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}
ffflabs
quelle
Aha, ich habe mich gefragt, warum .data () in d3 nicht wie in jquery funktioniert. In D3 muss gesetzt werden.attr('data-hash', '654687867asaj')
Prototyp
6
Das ist ein schlechter Vergleich. .data()in jQuery ist im Grunde eine Verknüpfung für den Zugriff auf das HTML-Attribut data-<custom-name>. In D3 hat dies jedoch nichts mit HTML-Datenattributen zu tun, und in D3 wird eine neue Auswahl als Verknüpfung von Daten zurückgegeben, die in Argumenten mit bereits ausgewählten Elementen übergeben wurden.
Nazikus
3
Es ist jetzt ein schlechter Vergleich, aber ab 2013 war es nicht so schlecht. Seitdem hat jQuery viel Polyfilling für ältere Browser eingestellt (Datenattribute waren eines davon), während D3 keine monolithische Bibliothek mehr ist und stattdessen ein Einstiegspunkt für eine Sammlung kleinerer spezifischer Bibliotheken wurde
ffflabs
11

Bei D3 geht es nicht nur um visuelle Grafiken. Datengesteuerte Dokumente. Wenn Sie d3 verwenden, binden Sie Daten an Dom-Knoten. Aufgrund von SVG können wir Diagramme erstellen, aber D3 ist noch viel mehr. Sie können Frameworks wie Backbone, Angular und Ember durch die Verwendung von D3 ersetzen.

Ich bin mir nicht sicher, wer gewählt hat, aber lassen Sie mich etwas mehr Klarheit hinzufügen.

Viele Websites fordern Daten vom Server an, die normalerweise aus einer Datenbank stammen. Wenn die Website diese Daten erhält, müssen wir eine Seitenaktualisierung des neuen Inhalts durchführen. Viele Frameworks tun dies, und d3 tut dies auch. Anstatt ein SVG-Element zu verwenden, können Sie stattdessen ein HTML-Element verwenden. Wenn Sie das Neuzeichnen aufrufen, wird die Seite schnell mit dem neuen Inhalt aktualisiert. Es ist wirklich schön, nicht all den zusätzlichen Aufwand wie jquery, backbone + seine Plugins, eckig usw. zu haben. Sie müssen nur d3 kennen. Jetzt ist in d3 kein Routing-System integriert. Aber Sie können immer einen finden.

Jquery hingegen hat nur den Zweck, weniger Code zu schreiben. Es ist nur eine Kurzversion von Javascript, die in vielen Browsern getestet wurde. Wenn Sie nicht viel Fragen auf Ihrer Webseite haben. Es ist eine großartige Bibliothek. Es ist einfach und erleichtert die Entwicklung von Javascript für mehrere Browser erheblich.

Wenn Sie versucht haben, jquery auf eine d3-ähnliche Weise zu implementieren, ist dies ziemlich langsam, da es nicht für diese Aufgabe entwickelt wurde. Ebenso ist d3 nicht für das Posten von Daten auf Servern konzipiert, sondern nur für das Konsumieren und Rendern von Daten .

jemiloii
quelle
1
"... Frameworks wie Backbone, Angular und Ember durch D3 ersetzen." können Sie näher darauf eingehen?
Billy Moon
Aus meiner Erfahrung habe ich gesehen, dass viele Leute diese Frameworks zum Rendern von Diagrammen und Grafiken verwenden, wenn Sie sie durch d3 ersetzen können. Wenn man wollte, könnten sie auch d3-Renderdaten auf der Seite haben, da sie Daten an Elemente binden. D3 kann mit großen Datenmengen schneller arbeiten als jQuery.
jemiloii
Ich bin mir nicht sicher, wer mich abgelehnt hat, aber ich wünschte, sie könnten einen Kommentar hinterlassen. D3 ist für datengesteuerte Dokumente. Nicht nur Diagramme.
jemiloii
Mit d3 easy können Sie eine wiederverwendbare Komponente erstellen. bost.ocks.org/mike/chart
jemiloii
2
Nicht naiv, ich habe nur d3 und Websockets für ein internes Tool verwendet, in dem ich arbeite. D3 befasste sich mit der Datenbindung aus den aus den Websockets abgerufenen Daten. Ich habe auch d3 verwendet, um einige verschiedene Ansichten zu verwalten. Es war ein eigenes SPA. D3 kann sowohl HTML-Elemente als auch SVG-Elemente verarbeiten. Sie sollten den Programmierer nicht unterschätzen. Deshalb ist das Web für mich wunderschön, viele Möglichkeiten, das Gleiche zu tun. Wählen Sie einfach die Art und Weise, wie Sie am besten genießen, es bleibt Spaß.
jemiloii
10

d3 wurde für die Datenvisualisierung erstellt. Dazu werden DOM-Objekte gefiltert und Transformationen angewendet.

jQuery wurde für die DOM-Manipulation entwickelt und erleichtert vielen grundlegenden JS-Aufgaben das Leben.

Wenn Sie Daten in hübsche, interaktive Bilder verwandeln möchten, ist D3 fantastisch.

Wenn Sie Ihre Webseite verschieben, bearbeiten oder auf andere Weise ändern möchten, ist jQuery Ihr Werkzeug.

achtzehn Jahre
quelle
7

Gute Frage!

Obwohl beide Bibliotheken viele der gleichen Funktionen aufweisen, scheint mir der größte Unterschied zwischen jQuery und D3 der Fokus zu sein.

jQuery ist eine Allzweckbibliothek mit dem Schwerpunkt, browserübergreifend und benutzerfreundlich zu sein.

D3 konzentriert sich auf Daten (Manipulation und Visualisierung) und unterstützt nur moderne Browser. Und obwohl es wie jQuery aussieht, ist es viel schwieriger zu bedienen.

John Slegers
quelle
3
jquery folgt einer Methode, bei der weniger geschrieben und mehr getan wird. d3 konzentriert sich auf das Rendern von Daten in die Dokumentelemente. Es gibt einige Gründe, warum d3 schwieriger ist, einer verwendet rohes Javascript und zweitens wird ein Teil des rohen Javascript geändert. Zum Beispiel: Javascript forEach (Wert, Index, Array), in d3 forEach (Index, Wert, Array). Ich bin mir nicht sicher, warum sie die Funktionsargumente umkehren, genau das, was ich in der Quelle gesehen habe. Ich denke, wir könnten d3 schneller machen, wenn wir die sinnlosen Funktionen nicht nutzen würden.
jemiloii
0

Beide können den gleichen Zweck lösen, ein DOM zu erstellen und zu bearbeiten (sei es HTML oder SVG). D3 zeigt eine API an, die allgemeine Aufgaben vereinfacht, die Sie beim Generieren / Bearbeiten eines DOM basierend auf Daten ausführen würden. Dies geschieht durch die native Unterstützung der Datenbindung über die Funktion data (). In jQuery müssten Sie die Daten manuell verarbeiten und definieren, wie an die Daten gebunden werden soll, um ein DOM zu generieren. Aus diesem Grund wird Ihr Code prozeduraler und schwieriger zu argumentieren und zu befolgen. Mit D3 sind weniger Schritte / Code und mehr deklarativ. D3 bietet auch einige übergeordnete Funktionen, die bei der Generierung der Datenvisualisierung in SVG helfen. Funktionen wie range (), domain () und scale () erleichtern das Aufnehmen und Zeichnen von Daten in einem Diagramm. Funktionen wie axis () erleichtern auch das Zeichnen allgemeiner UI-Elemente, die Sie in einem Diagramm / einer Grafik erwarten würden.

Steven Pena
quelle