Qual é a diferença entre D3 e jQuery?

Referindo-se a este exemplo:

http://vallandingham.me/stepper_steps.html

parece que as bibliotecas D3 e jQuery são muito semelhantes no sentido de que ambas fazem a manipulação do DOM em uma forma de encadeamento de objetos.

Estou curioso para saber quais funções o D3 torna mais fácil do que o jQuery e vice-versa. Existem muitas bibliotecas de gráficos e visualização que usam jQuery como base (por exemplo,gráficos altos, flot, wijmo)

Por favor, dê exemplos específicos de como eles são diferentes.

• D3 é orientado de dados , mas jQuery não é: com jQuery você manipular diretamente elementos, mas com D3 você fornecer dados e chamadas de retorno através de D3 de único data(), enter()e exit()métodos e D3 manipula elementos.

• D3 geralmente é usado para visualização de dados, mas jQuery é usado para criar aplicativos da web. D3 tem muitas extensões de visualização de dados e jQuery tem muitos plug-ins de aplicativos da web.

• Ambos são bibliotecas de manipulação de JavaScript DOM, têm seletores CSS e API fluente e são baseados em padrões da web que os fazem parecer semelhantes.

O código a seguir é um exemplo de uso de D3 que não é possível com jQuery (tente no 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 tem uma descrição boba. jQuery e d3 não são nada semelhantes, você apenas não os usa para as mesmas coisas.

O propósito do jQuery é fazer manipulação geral do dom. É um kit de ferramentas javascript de propósito geral para qualquer coisa que você queira fazer.

O d3 foi projetado principalmente para facilitar a criação de gráficos brilhantes com dados. Definitivamente, você deve usá-lo (ou algo semelhante, ou algo construído sobre ele) se quiser fazer visualizações gráficas de dados.

Se você deseja uma biblioteca JS de propósito geral para todas as suas necessidades de formulários interativos, considere jQuery ou proto ou mootools. Se você quiser algo pequeno, considere o underscore.js. Se você quiser algo com injeção de dependência e testabilidade, considere o AngularJS.

Um guia de comparação geral da wikipedia.

Eu posso ver porque alguém pensaria que eles são semelhantes. Eles usam uma sintaxe de seletor semelhante - $ ('SELECTOR') e d3 é uma ferramenta extremamente poderosa para selecionar, filtrar e operar em elementos html, especialmente ao encadear essas operações. d3 tenta explicar isso para você em sua página inicial, afirmando ser uma biblioteca de propósito geral, mas o fato é que a maioria das pessoas a usa quando quer fazer gráficos . É bastante incomum usá-lo para manipulação de dom comum porque a curva de aprendizado do d3 é muito íngreme. É, entretanto, uma ferramenta muito mais geral do que o jQuery, e geralmente as pessoas constroem outras bibliotecas mais específicas (como nvd3) em cima do d3 ao invés de usá-lo diretamente.

A resposta de @JohnS também é muito boa. API fluente = encadeamento de método. Também concordo sobre onde os plug-ins e a extensão o levam com as bibliotecas.

Tenho usado um pouco dos dois ultimamente. Como d3 usa os seletores do Sizzle, você pode confundir os seletores.

Apenas tenha em mente que d3.select ('# mydiv') não retorna exatamente o mesmo que jQuery ('# mydiv'). É o mesmo elemento DOM, mas está sendo instanciado com diferentes construtores. Por exemplo, digamos que você tenha o seguinte elemento:

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

E vamos pegar alguns métodos comuns:

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

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

Parece legítimo. Mas se você for um pouco mais:

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

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

D3 não se trata apenas de gráficos visuais. Documentos baseados em dados. Ao usar d3, você vincula dados a nós dom. Graças ao SVG, podemos fazer gráficos, mas D3 é muito mais. Você pode substituir estruturas como Backbone, Angular e Ember com o uso de D3.

Não tenho certeza de quem votou contra, mas deixe-me acrescentar um pouco mais de clareza.

Muitos sites solicitam dados do servidor, que geralmente vêm de um banco de dados. Quando o site receber esses dados, temos que fazer uma atualização da página do novo conteúdo. Muitos frameworks fazem isso e o d3 também faz. Portanto, em vez de usar um elemento svg, você pode usar o elemento html. Quando você chama o redesenho, ele atualiza rapidamente a página com o novo conteúdo. É muito bom não ter toda a sobrecarga extra como jquery, backbone + seus plugins, angular, etc. Você só precisa saber d3. Agora o d3 não tem um sistema de roteamento embutido nele. Mas você sempre pode encontrar um.

Por outro lado, o Jquery tem como único propósito escrever menos código. É apenas uma versão resumida de javascript que foi testada em muitos navegadores. Se você não tem muito jquery em sua página. É uma ótima biblioteca para usar. É simples e exige muito do desenvolvimento de javascript para vários navegadores.

Se você tentou implementar jquery no estilo d3, será bem lento, pois não foi projetado para essa tarefa, da mesma forma, d3 não é projetado para postar dados em servidores, ele é projetado apenas para consumir e renderizar dados .

d3 é feito para visualização de dados, ele faz isso filtrando objetos DOM e aplicando transformações.

jQuery é feito para manipulação DOM e tornando a vida mais fácil para muitas tarefas JS básicas.

Se você deseja transformar dados em imagens bonitas e interativas, a D3 é incrível.

Se você deseja mover, manipular ou modificar sua página da web, jQuery é a sua ferramenta.

Ótima pergunta!

Embora ambas as bibliotecas compartilhem muitos dos mesmos recursos, parece-me que a maior diferença entre jQuery e D3 é o foco.

jQuery é uma biblioteca de propósito geral com foco em ser cross-browser e fácil de usar.

D3 é focado em dados (manipulação e visualização) e suporta apenas navegadores modernos. E embora pareça jQuery, é muito mais difícil de usar.

Ambos podem resolver o mesmo propósito de criar e manipular um DOM (seja HTML ou SVG). O D3 apresenta uma API que simplifica as tarefas comuns que você executaria ao gerar / manipular um DOM com base em dados. Ele faz isso por meio de seu suporte nativo para vinculação de dados por meio da função data (). No jQuery, você teria que processar manualmente os dados e definir como vincular aos dados para gerar um DOM. Por causa disso, seu código se torna mais procedimental e mais difícil de raciocinar e seguir. Com D3, é menos etapas / código e mais declarativo. O D3 também fornece algumas funções de nível superior que auxiliam na geração de visualização de dados em SVG. Funções como range (), domain () e scale () tornam mais fácil pegar dados e plotá-los em um gráfico. Funções como axis () também facilitam o desenho de elementos de IU comuns que você esperaria em um gráfico / gráfico.