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

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,highcharts, flot, wijmo).

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

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

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.

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

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. .

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.

¡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.

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.