Quelle est la différence entre D3 et jQuery?
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 en ce sens qu'elles effectuent toutes deux des manipulations DOM D'une manière de 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 graphiques et de visualisation qui utilisent jQuery comme base (par ex., highcharts , flot , wijmo ).
veuillez donner des exemples précis de leur différence.
7 réponses
-
D3 data-driven mais jQuery n'est pas: avec jQuery vous manipuler directement les éléments, mais avec D3 vous fournir des données et des rappels par le biais de D3 est unique
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 la création d'applications web. D3 a de nombreux les extensions de visualisation de données et jQuery a de nombreux plugins d'application web.
-
les deux sont des bibliothèques de manipulation de DOM JavaScript, ont des sélecteurs CSS et API fluent et sont basés sur des normes web qui les font paraître 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 des manipulations dom générales. Il s'agit d'une boîte à outils javascript à usage général pour tout ce que vous pourriez vouloir faire.
d3 a été principalement conçu pour rendre facile de faire des graphiques brillants avec des données. Vous devez certainement l'utiliser (ou quelque chose de similaire, ou quelque chose construit sur le dessus de celui-ci) si vous voulez faire graphique des visualisations de données.
si vous voulez une bibliothèque JS polyvalente pour tous vos besoins de forme interactive, considérez jQuery ou proto ou mootools. Si vous voulez quelque chose de minuscule, considérez le trait de soulignement.js. Si vous voulez quelque chose avec injection de dépendance et testabilité, considérez AngularJS.
Un Général "de comparaison 1519100920" guide de wikipedia.
je vois pourquoi quelqu'un penserait qu'ils sont similaires. Ils utilisent un 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 tout en enchaînant ces opérations ensemble. d3 essaie de vous expliquer cela sur sa page d'accueil en prétendant être une bibliothèque polyvalente, 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 de dom moyenne parce que la courbe d'apprentissage d3 est si raide. Il 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) sur 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 l'endroit 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 assez mélanger les sélecteurs.
gardez juste à l'esprit d3.select ('#mydiv') ne revient pas tout à fait comme 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:
> 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 de données, il le fait en filtrant à travers des objets DOM et en appliquant des transformations.
jQuery est fait pour la manipulation de DOM et de rendre la vie plus facile pour de nombreuses tâches JS de base.
si vous cherchez à transformer les 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.
D3 ne concerne pas seulement les graphiques visuels. Documents Axés Sur Les Données. Lorsque vous utilisez d3, vous liez les données aux noeuds dom. Grâce à SVG nous sommes capables de faire des graphiques, mais D3 est tellement plus. Vous pouvez remplacer des cadres comme L'épine dorsale, L'angle et L'Ember par D3.
Je ne sais pas qui a voté, mais permettez-moi d'ajouter plus de clarté.
de nombreux sites web demandent des données à partir du serveur, qui provient généralement d'une base de données. Lorsque le site web reçoit ces données, nous faire une page de mise à jour du nouveau contenu. De nombreux cadres font cela, et d3 le fait aussi. Ainsi, au lieu d'utiliser un élément svg, vous pouvez utiliser un élément html à la place. Lorsque vous appelez le redessinez, il va rapidement mettre à jour la page avec le nouveau contenu. Il est très agréable 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. Maintenant, d3 n'a pas de système de routage. Mais vous pouvez toujours en trouver un.
Jquery sur l'autre main, son seul but est d'écrire moins de code. C'est juste une courte version de javascript qui a été testé sur de nombreux navigateurs. Si vous n'avez pas beaucoup de jquery sur votre page web. C'est une grande bibliothèque à utiliser. C'est simple et prend beaucoup de peine dans le développement javascript pour les navigateurs multiples.
si vous avez essayé de mettre en œuvre jquery dans un d3 comme la mode, il sera assez lent, car il n'a pas été conçu pour cette tâche, de même, d3 n'est pas la conception pour poster des données aux serveurs, il est conçu juste pour consommer et rendre des données.
grande question!
bien que les deux bibliothèques partagent plusieurs des mêmes caractéristiques, il me semble que la plus grande différence entre jQuery et D3 est le foyer.
jQuery est une bibliothèque à usage général avec un accent sur être cross-browser et d'être facile à utiliser.
D3 est axé 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 de 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 fait apparaître une API qui simplifie les tâches courantes que vous devez effectuer lors de la génération/manipulation d'un DOM basé sur des données. Il le fait à travers son support natif pour 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 pour 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 de pas/code et plus déclaratif. D3 fournit également certaines fonctions de niveau supérieur qui aident à générer la visualisation des données dans SVG. Des fonctions telles que range(),domain () et scale() facilitent la prise de données et leur représentation graphique. Les fonctions comme axis() permettent également de dessiner plus facilement les éléments communs de L'interface utilisateur que vous attendez dans un graphique. Il existe de nombreuses autres bibliothèques api de haut niveau qui se trouvent au-dessus de D3 pour aider à des visualisations plus complexes de données, y compris des comportement et animation.