¿Cuál es la diferencia entre D3 y jQuery?

103

Refiriéndose a este ejemplo:

http://vallandingham.me/stepper_steps.html

parece que las bibliotecas D3 y jQuery son muy similares en el sentido de que ambas manipulan DOM en una forma de encadenamiento de objetos.

Tengo curiosidad por saber qué funciones hace D3 más fácil que jQuery y viceversa. Hay muchas bibliotecas de visualización y gráficos que utilizan jQuery como base (por ejemplo,, , ).

Proporcione ejemplos específicos de en qué se diferencian.

zcaudate
fuente

Respuestas:

92
  • D3 es impulsado por los datos , pero no es jQuery: jQuery manipular directamente los elementos, pero con D3 le proporcionan los datos y las devoluciones de llamada a través de D3 única data(), enter()y exit()los métodos y D3 elementos manipula.

  • D3 generalmente se usa para la visualización de datos, pero jQuery se usa para crear aplicaciones web. D3 tiene muchas extensiones de visualización de datos y jQuery tiene muchos complementos de aplicaciones web.

  • Ambas son bibliotecas de manipulación DOM de JavaScript, tienen selectores de CSS y API fluida y se basan en estándares web que los hacen parecer similares.

El siguiente código es un ejemplo del uso de D3 que no es posible con jQuery (pruébelo en 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
fuente
9
bonito, un ejemplo vale más que 1000 palabras
TMG
59

d3 tiene una descripción tonta. jQuery y d3 no son en absoluto similares, simplemente no los usa para las mismas cosas.

El propósito de jQuery es realizar una manipulación de dom en general. Es un kit de herramientas de JavaScript de propósito general para cualquier cosa que desee hacer.

d3 fue diseñado principalmente para facilitar la creación de gráficos brillantes con datos. Definitivamente debería usarlo (o algo similar, o algo construido sobre él) si desea realizar visualizaciones gráficas de datos.

Si desea una biblioteca JS de propósito general para todas sus necesidades de formularios interactivos, considere jQuery o proto o mootools. Si quieres algo pequeño, considera underscore.js. Si desea algo con inyección de dependencia y capacidad de prueba, considere AngularJS.

Una guía de comparación general de wikipedia.

Puedo ver por qué alguien pensaría que son similares. Usan una sintaxis de selector similar - $ ('SELECTOR'), y d3 es una herramienta extremadamente poderosa para seleccionar, filtrar y operar en elementos html, especialmente al encadenar estas operaciones. d3 intenta explicarle esto en su página de inicio afirmando ser una biblioteca de propósito general, pero el hecho es que la mayoría de la gente la usa cuando quiere hacer gráficos . Es bastante inusual usarlo para la manipulación promedio de dom porque la curva de aprendizaje de d3 es muy pronunciada. Sin embargo, es una herramienta mucho más general que jQuery y, en general, la gente crea otras bibliotecas más específicas (como nvd3) sobre d3 en lugar de usarla directamente.

La respuesta de @ JohnS también es muy buena. API fluida = encadenamiento de métodos. También estoy de acuerdo sobre dónde te llevan los complementos y la extensión con las bibliotecas.

Caso
fuente
1
@zcaudate, d3 no está en el enlace porque es muy especializado. Ese enlace solo compara marcos generales.
Caso
1
La otra cosa que agregaría es que D3 crea un SVG (Scalable Vector Graphics). Esto es genial porque las cosas pueden cambiar de tamaño fácilmente y permanecer fácilmente proporcionales a los otros elementos. Aunque es posible que pueda lograr lo mismo en JQuery (como se muestra en el enlace de ejemplo del OP), no están destinados a reemplazarse entre sí.
EnigmaRM
2
Son similares en que ambos se ejecutan en Sizzle y usan los mismos selectores (gran parte de cada marco). Sin embargo, después de la selección, construyen objetos de manipulación DOM muy diferentes.
cchamberlain
5
+1 para una descripción tonta. Investigo muchas bibliotecas y componentes del lado del cliente, pero no pasé de la primera oración en su sitio web antes de sentirme completamente perdido. Hice clic en el elegante mozaic hexagonal esotérico de 'cosas' y me llevó a un lugar misterioso y sin relación. Como no entiendo lo que está pasando aquí, asumo que soy indigno del club d3. Como tal, disminuiré, iré a Occidente y permaneceré sin d3.
Jonathan Neufeld
13

He estado usando un poco de ambos últimamente. Dado que d3 usa los selectores de Sizzle, puede mezclar los selectores.

Solo tenga en cuenta que d3.select ('# mydiv') no devuelve exactamente lo mismo que jQuery ('# mydiv'). Es el mismo elemento DOM, pero está siendo instanciado con diferentes constructores. Por ejemplo, digamos que tiene el siguiente elemento:

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

Y tomemos algunos métodos comunes:

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

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

Parece legitimo. Pero si vas un poco más lejos:

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

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}
ffflabs
fuente
Ajá, me he preguntado por qué .data () en d3 no funciona como en jquery. En D3, tengo que configurar.attr('data-hash', '654687867asaj')
prototipo
6
esta es una mala comparación. .data()en jQuery es básicamente un atajo para acceder al atributo html data-<custom-name>. Pero en D3 no tiene nada que ver con los atributos de datos html, y lo que hace en D3 es devolver una nueva selección como combinación de datos pasados ​​en args con elementos ya seleccionados.
nazikus
3
ahora es una mala comparación, pero a partir de 2013 no era tan mala. Desde entonces, jQuery ha eliminado una gran cantidad de polyfilling para navegadores más antiguos (los atributos de datos era uno de ellos), mientras que D3 ha dejado de ser una biblioteca monolítica y se ha convertido en un punto de entrada para una colección de bibliotecas específicas más pequeñas
ffflabs
11

D3 no se trata solo de gráficos visuales. Documentos basados ​​en datos. Cuando usa d3, enlaza datos a nodos dom. Gracias a SVG podemos hacer gráficos, pero D3 es mucho más. Puede reemplazar marcos como Backbone, Angular y Ember con el uso de D3.

No estoy seguro de quién votó en contra, pero permítanme agregar algo más de claridad.

Muchos sitios web solicitan datos del servidor, que generalmente proviene de una base de datos. Cuando el sitio web recibe estos datos, tenemos que hacer una actualización de la página del nuevo contenido. Muchos frameworks hacen esto y d3 también lo hace. Entonces, en lugar de usar un elemento svg, puede usar un elemento html. Cuando llame a redibujar, actualizará rápidamente la página con el nuevo contenido. Es realmente bueno no tener toda la sobrecarga adicional como jquery, backbone + sus complementos, angular, etc. Solo necesitas saber d3. Ahora d3 no tiene un sistema de enrutamiento integrado. Pero siempre puedes encontrar uno.

Jquery, por otro lado, su único propósito es escribir menos código. Es solo una versión abreviada de JavaScript que se ha probado en muchos navegadores. Si no tiene mucho jquery en su página web. Es una gran biblioteca para usar. Es simple y le quita muchos esfuerzos al desarrollo de JavaScript para múltiples navegadores.

Si trataste de implementar jquery de una manera similar a d3, será bastante lento, ya que no fue diseñado para esa tarea, de la misma manera, d3 no está diseñado para publicar datos en servidores, está diseñado solo para consumir y renderizar datos. .

jemiloii
fuente
1
"... reemplace marcos como Backbone, Angular y Ember con el uso de D3". ¿puedes elaborar?
Billy Moon
Desde mi experiencia, he visto a muchas personas usar estos marcos para representar cuadros y gráficos, cuando puede reemplazarlos con d3. Si uno quisiera, también podrían tener datos de renderizado d3 en la página, ya que vincula datos a elementos. D3 puede trabajar con grandes conjuntos de datos más rápido que jQuery.
jemiloii
No estoy seguro de quién me votó negativamente, pero me gustaría que pudieran dejar un comentario. D3 es para documentos basados ​​en datos. No solo gráficos.
jemiloii
Puede construir un componente reutilizable con d3 easy. bost.ocks.org/mike/chart
jemiloii
2
No es ingenuo, solo usé d3 y websockets para una herramienta interna donde trabajo. D3 se ocupó del enlace de datos de los datos recuperados de los websockets. También usé d3 para administrar algunas vistas diferentes. Era su propio SPA. D3 puede manejar elementos html así como elementos svg. No debes subestimar al programador. Es por eso que la web es hermosa para mí, muchas formas de hacer lo mismo. Simplemente elige la forma que más te guste, sigue siendo divertido.
jemiloii
10

d3 está diseñado para la visualización de datos, lo hace filtrando a través de objetos DOM y aplicando transformaciones.

jQuery está hecho para la manipulación DOM y facilita la vida de muchas tareas JS básicas.

Si está buscando convertir datos en imágenes bonitas e interactivas, D3 es increíble.

Si está buscando mover, manipular o modificar su página web, jQuery es su herramienta.

dieciocho ojos
fuente
7

¡Gran pregunta!

Si bien ambas bibliotecas comparten muchas de las mismas características, me parece que la mayor diferencia entre jQuery y D3 es el enfoque.

jQuery es una biblioteca de propósito general con un enfoque en ser entre navegadores y fácil de usar.

D3 se centra en los datos (manipulación y visualización) y solo admite navegadores modernos. Y aunque se parece a jQuery, es mucho más difícil de usar.

John Slegers
fuente
3
jquery sigue una metodología de escribir menos hacer más, d3 se centra en la representación de datos en los elementos del documento. Hay algunas razones por las que d3 es más difícil, una usa javascript sin formato y dos, se cambia parte del javascript sin procesar. Por ejemplo: Javascript para cada (valor, índice, matriz), en d3 para cada (índice, valor, matriz). No estoy seguro de por qué invierten los argumentos de la función, solo lo que he visto en la fuente. Creo que podríamos hacer que d3 sea más rápido si elimináramos las funciones inútiles.
jemiloii
0

Ambos pueden resolver el mismo propósito de crear y manipular un DOM (ya sea HTML o SVG). D3 muestra una API que simplifica las tareas comunes que realizaría al generar / manipular un DOM basado en datos. Lo hace a través de su soporte nativo para el enlace de datos a través de la función data (). En jQuery, tendría que procesar manualmente los datos y definir cómo enlazar los datos para generar un DOM. Debido a esto, su código se vuelve más procedimental y más difícil de razonar y seguir. Con D3, es menos pasos / código y más declarativo. D3 también proporciona algunas funciones de nivel superior que ayudan a generar visualización de datos en SVG. Funciones como rango (), dominio () y escala () facilitan tomar datos y trazarlos en un gráfico. Las funciones como axis () también facilitan el dibujo de elementos comunes de la interfaz de usuario que esperaría en un gráfico.

Steven Peña
fuente