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 soient très similaires dans le sens où elles effectuent toutes les deux une manipulation DOM de manière chaînante.
Je suis curieux de savoir quelles fonctions D3 rend plus faciles que jQuery et vice versa. Il existe de nombreuses bibliothèques graphiques et de visualisation qui utilisent jQuery comme base (par exemple, highcharts , flot , wijmo ).
Veuillez donner des exemples précis de leurs différences.
D3 est piloté par les données mais jQuery ne l'est pas: avec jQuery vous manipulez directement , mais avec D3 vous fournissez des données et des rappels via les uniques
data(),enter()etexit()méthodes et D3 manipule les éléments.D3 est généralement utilisé pour la visualisation des 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 DOM JavaScript, ont des sélecteurs CSS et une API fluide et sont basées sur des normes Web qui les rendent 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 voulez faire des visualisations graphiques des 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 minuscule, pensez à underscore.js. Si vous voulez quelque chose avec l'injection de dépendances et la testabilité, pensez à AngularJS.
Un comparaison générale guide de wikipedia.
Je peux voir pourquoi quelqu'un pense qu'ils sont similaires. Ils utilisent une syntaxe de sélection 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 expliquer cela 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 quand ils veulent faire des graphiques . Il est assez inhabituel de l'utiliser pour votre manipulation moyenne de dom 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 (comme 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éthode. Je suis également d'accord sur où les plugins et l'extension vous mènent avec les bibliothèques.
J'ai utilisé un peu des deux dernièrement. Puisque d3 utilise les sélecteurs de Sizzle, vous pouvez à peu près mélanger les sélecteurs.
Gardez juste à 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, supposons que vous ayez 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 est fait pour la visualisation des données, il le fait en filtrant les objets DOM et en appliquant des transformations.
jQuery est conçu pour la manipulation DOM et simplifie la vie de nombreuses tâches JS de base.
Si vous cherchez à transformer des données en images jolies et interactives, D3 est génial.
Si vous cherchez à déplacer, manipuler ou autrement modifier votre page Web, jQuery est votre outil.
D3 ne concerne pas seulement les graphiques visuels. Documents basés sur les données. Lorsque vous utilisez d3, vous liez des données à des 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 en utilisant D3.
Je ne sais pas qui a voté contre, mais permettez-moi d'ajouter un peu plus de clarté.
De nombreux sites Web demandent des données au serveur, qui provient 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. Ainsi, au lieu d'utiliser un élément svg, vous pouvez utiliser à la place un élément html. Lorsque vous appelez le redessin, il mettra rapidement à jour la page avec le nouveau contenu. C'est vraiment sympa de ne pas avoir tous les frais généraux supplémentaires comme jquery, backbone + ses plugins, angular, etc. Il vous suffit de connaître d3. Maintenant, 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. Ce n'est qu'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 du développement javascript pour plusieurs navigateurs.
Si vous avez essayé d'implémenter jquery comme une mode 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 uniquement pour consommer et restituer des données .
Grande 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 le focus.
jQuery est une bibliothèque à usage général qui se concentre sur le multi-navigateur et la simplicité d'utilisation.
D3 se concentre sur les données (manipulation et visualisation) et ne prend en charge que les navigateurs modernes. Et bien qu'il ressemble à jQuery, il est beaucoup plus difficile à utiliser.
Les deux peuvent résoudre le même objectif de création et de manipulation d'un DOM (que ce soit HTML ou SVG). D3 présente une API qui simplifie les tâches courantes que vous effectuez lors de la génération/manipulation d'un DOM basé sur des données. Il le fait grâce à son support natif pour la liaison de données via la fonction data (). Dans jQuery, vous devez traiter manuellement les données et définir comment les 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 dans SVG. Des fonctions comme 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 communs que vous attendez d'un graphique/graphique. Il existe de nombreuses autres bibliothèques d'api de niveau supérieur qui se trouvent au-dessus de D3 pour faciliter les visualisations plus complexes des données, y compris le comportement interactif et l'animation.