Quelle est la différence entre D3 et jQuery?

En se référant à cet exemple:

http://vallandingham.me/stepper_steps.html

il semble que les bibliothèques D3 et jQuery sont très similaires dans le sens où elles effectuent toutes les deux des manipulations DOM dans le cadre d'un chaînage d'objets.

Je suis curieux de savoir quelles fonctions D3 rend plus facile que jQuery et vice versa. Il existe de nombreuses bibliothèques de graphiques et de visualisation qui utilisent jQuery comme base (par exemple,highcharts, flotter, Wijmo).

Veuillez donner des exemples précis de leur différence.

• D3 est basée sur les données mais jQuery n'est pas: avec jQuery vous manipuler directement des éléments, mais avec D3 vous fournir des données et des callbacks à D3 est unique data(), enter()et les exit()méthodes et D3 manipule des éléments.

• D3 est généralement utilisé pour la visualisation de données, mais jQuery est utilisé pour créer des applications Web. D3 a de nombreuses extensions de visualisation de données et jQuery a de nombreux plugins d'application Web.

• Les deux sont des bibliothèques de manipulation JavaScript DOM, ont des sélecteurs CSS et une API fluide et sont basés sur des normes Web, ce qui les rend similaires.

Le code suivant est un exemple d'utilisation de D3 qui n'est pas possible avec jQuery (essayez-le dans 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 a une description idiote. jQuery et d3 ne sont pas du tout similaires, vous ne les utilisez tout simplement pas pour les mêmes choses.

Le but de jQuery est de faire une manipulation générale de dom. C'est une boîte à outils javascript à usage général pour tout ce que vous pourriez vouloir faire.

d3 a été principalement conçu pour faciliter la création de graphiques brillants avec des données. Vous devriez certainement l'utiliser (ou quelque chose de similaire, ou quelque chose de construit dessus) si vous souhaitez faire des visualisations graphiques de données.

Si vous voulez une bibliothèque JS à usage général pour tous vos besoins de formulaires interactifs, pensez à jQuery ou proto ou mootools. Si vous voulez quelque chose de petit, pensez à underscore.js. Si vous voulez quelque chose avec l'injection de dépendances et la testabilité, pensez à AngularJS.

Un guide de comparaison générale de wikipedia.

Je peux voir pourquoi quelqu'un penserait qu'ils sont similaires. Ils utilisent une syntaxe de sélecteur similaire - $ ('SELECTOR'), et d3 est un outil extrêmement puissant pour sélectionner, filtrer et opérer sur des éléments html, en particulier lors du chaînage de ces opérations. d3 essaie de vous l'expliquer sur sa page d'accueil en prétendant être une bibliothèque à usage général, mais le fait est que la plupart des gens l'utilisent lorsqu'ils veulent créer des graphiques . Il est assez inhabituel de l'utiliser pour votre manipulation de dom moyenne car la courbe d'apprentissage d3 est si raide. C'est, cependant, un outil beaucoup plus général que jQuery, et généralement les gens construisent d'autres bibliothèques plus spécifiques (telles que nvd3) au-dessus de d3 plutôt que de l'utiliser directement.

La réponse de @ JohnS est également très bonne. API Fluent = chaînage de méthodes. Je suis également d'accord pour savoir où les plugins et l'extension vous mènent avec les bibliothèques.

J'utilise un peu des deux ces derniers temps. Puisque d3 utilise les sélecteurs de Sizzle, vous pouvez à peu près mélanger les sélecteurs.

Gardez simplement à l'esprit que d3.select ('# mydiv') ne renvoie pas tout à fait la même chose que jQuery ('# mydiv'). C'est le même élément DOM, mais il est instancié avec différents constructeurs. Par exemple, disons que vous avez l'élément suivant:

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

Et prenons quelques méthodes courantes:

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

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

Semble légitime. Mais si vous allez un peu plus loin:

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

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}

D3 ne concerne pas uniquement les graphiques visuels. Documents basés sur les données. Lorsque vous utilisez d3, vous liez les données aux nœuds dom. Grâce à SVG, nous pouvons créer des graphiques, mais D3 est bien plus. Vous pouvez remplacer des frameworks tels que Backbone, Angular et Ember par l'utilisation de D3.

Je ne sais pas qui a voté, mais permettez-moi d’ajouter un peu plus de clarté.

De nombreux sites Web demandent des données au serveur, qui proviennent généralement d'une base de données. Lorsque le site Web reçoit ces données, nous devons faire une mise à jour de la page du nouveau contenu. De nombreux frameworks le font, et d3 le fait également. Donc, au lieu d'utiliser un élément svg, vous pouvez utiliser un élément html à la place. Lorsque vous appelez le redessiner, il met rapidement à jour la page avec le nouveau contenu. C'est vraiment bien de ne pas avoir tous les frais généraux supplémentaires comme jquery, backbone + ses plugins, angular, etc. Il suffit de connaître d3. Désormais, d3 n'a pas de système de routage intégré. Mais vous pouvez toujours en trouver un.

Jquery d'autre part, son seul but est d'écrire moins de code. C'est juste une version abrégée de javascript qui a été testée sur de nombreux navigateurs. Si vous n'avez pas beaucoup de jquery sur votre page Web. C'est une excellente bibliothèque à utiliser. C'est simple et prend beaucoup de peine hors du développement javascript pour plusieurs navigateurs.

Si vous avez essayé d'implémenter jquery à la manière de d3, ce sera assez lent, car il n'a pas été conçu pour cette tâche, de même, d3 n'est pas conçu pour publier des données sur des serveurs, il est conçu simplement pour consommer et rendre des données .

d3 est fait pour la visualisation de données, il le fait en filtrant les objets DOM et en appliquant des transformations.

jQuery est conçu pour la manipulation DOM et facilite la vie de nombreuses tâches JS de base.

Si vous cherchez à transformer des données en jolies images interactives, D3 est génial.

Si vous cherchez à déplacer, manipuler ou modifier votre page Web, jQuery est votre outil.

Excellente question!

Bien que les deux bibliothèques partagent plusieurs des mêmes fonctionnalités, il me semble que la plus grande différence entre jQuery et D3 est l'objectif.

jQuery est une bibliothèque à usage général qui se concentre sur le fait d'être multi-navigateurs et d'être facile à utiliser.

D3 se concentre sur les données (manipulation et visualisation) et ne prend en charge que les navigateurs modernes. Et même si cela ressemble à jQuery, il est beaucoup plus difficile à utiliser.

Les deux peuvent résoudre le même but de créer et de manipuler un DOM (que ce soit HTML ou SVG). D3 présente une API qui simplifie les tâches courantes que vous auriez à effectuer lors de la génération / manipulation d'un DOM basé sur des données. Il le fait grâce à sa prise en charge native de la liaison de données via la fonction data (). Dans jQuery, vous devrez traiter manuellement les données et définir comment se lier aux données afin de générer un DOM. Pour cette raison, votre code devient plus procédural et plus difficile à raisonner et à suivre. Avec D3, c'est moins d'étapes / code et plus déclaratif. D3 fournit également des fonctions de niveau supérieur qui aident à générer la visualisation des données en SVG. Des fonctions telles que range (), domain () et scale () facilitent la prise de données et leur tracé sur un graphique. Des fonctions telles que axis () facilitent également le dessin d'éléments d'interface utilisateur courants auxquels vous vous attendez dans un graphique / graphique.