Was ist der Unterschied zwischen D3 und jQuery?

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.Highcharts, Flot, wijmo).

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

• 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();

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.

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"}

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 .

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.

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.

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.