Qual é a diferença entre D3 e jQuery?

103

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.

javascript jquery d3.js

— zcaudate
fonte

92

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

— Ali Shakiba
fonte

9

bom, um exemplo vale mais do que 1000 palavras

— TMG

59

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.

— Caso
fonte

1

@zcaudate, d3 não está no link porque é muito especializado. Esse link apenas compara estruturas gerais.

— Caso

1

Outra coisa que gostaria de acrescentar é que o D3 cria um SVG (Scalable Vector Graphics). Isso é ótimo porque as coisas podem facilmente mudar de tamanho e permanecer proporcionais aos outros elementos. Embora você possa realizar a mesma coisa em JQuery (conforme mostrado no link de exemplo do OP), eles não devem substituir um ao outro.

— EnigmaRM

2

Eles são semelhantes no sentido de que ambos rodam no Sizzle e usam os mesmos seletores (grande parte de cada framework). No entanto, após a seleção, eles constroem objetos de manipulação DOM muito diferentes.

— cchamberlain

5

1 para uma descrição boba. Eu pesquiso muitas bibliotecas e componentes do lado do cliente, mas não passei da primeira frase em seu site antes de me sentir completamente perdido. Cliquei no sofisticado mozaico hexagonal esotérico de 'coisas' e ele me levou a algum lugar misterioso e não relacionado. Como não consigo entender o que está acontecendo aqui, presumo que não mereço o clube d3. Como tal, vou diminuir e ir para o Oeste e permanecer sem d3.

— Jonathan Neufeld,

13

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

— ffflabs
fonte

Aha, me perguntei por que .data () em d3 não funciona como em jquery. Em D3, tem que definir.attr('data-hash', '654687867asaj')

— protótipo de

6

esta é uma comparação ruim. .data()em jQuery é basicamente um atalho para acessar o atributo html data-<custom-name>. Mas em D3 não tem nada a ver com atributos de dados html, e o que faz em D3 é retornar uma nova seleção como junção de dados passados em args com elementos já selecionados.

— nazikus

3

é uma comparação ruim agora, mas a partir de 2013 não era tão ruim. Desde então, o jQuery abandonou muitos polyfilling para navegadores mais antigos (atributos de dados era um deles), enquanto D3 deixou de ser uma biblioteca monolítica e se tornou um ponto de entrada para uma coleção de bibliotecas específicas menores

— ffflabs

11

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 .

— Jemiloii
fonte

1

"... substitua estruturas como Backbone, Angular e Ember com o uso de D3." Você pode elaborar?

— Billy Moon,

Pela minha experiência, tenho visto muitas pessoas usarem esses frameworks para renderizar tabelas e gráficos, quando você pode substituí-los por d3. Se alguém quisesse, eles também poderiam ter dados de renderização d3 na página, uma vez que vincula dados a elementos. O D3 pode trabalhar com grandes conjuntos de dados mais rápido do que o jQuery.

— jemiloii

não tenho certeza de quem votou contra mim, mas gostaria que eles pudessem deixar um comentário. D3 é para documentos baseados em dados. Não apenas gráficos.

— jemiloii de

Você pode construir um componente reutilizável com o d3 easy. bost.ocks.org/mike/chart

— jemiloii

2

Não ingênuo, usei apenas d3 e websockets para uma ferramenta interna onde trabalho. D3 lidou com a vinculação de dados dos dados recuperados dos websockets. Eu também usei o d3 para gerenciar algumas visualizações diferentes. Era o seu próprio SPA. O D3 pode lidar com elementos html, bem como elementos svg. Você não deve subestimar o programador. É por isso que a web é linda para mim, muitas maneiras de fazer a mesma coisa. Basta escolher a maneira que você mais gosta, e continua divertido.

— jemiloii

10

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.

— dezoito olhos
fonte

7

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

— John Slegers
fonte

3

jquery segue uma metodologia de escrever menos fazer mais, d3 é focado em renderizar dados para os elementos do documento. Existem algumas razões pelas quais o d3 é mais difícil, uma porque usa javascript bruto e, segundo, parte do javascript bruto foi alterado. Por exemplo: Javascript forEach (valor, índice, matriz), em d3 forEach (índice, valor, matriz). Não sei por que eles invertem os argumentos da função, apenas o que vi na fonte. Acho que poderíamos tornar o d3 mais rápido se eliminássemos as funções inúteis.

— jemiloii de

0

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.

— Steven Pena
fonte