В чем разница между D3 и jQuery?

Ссылаясь на этот пример:

http://vallandingham.me/stepper_steps.html

Кажется, что библиотеки D3 и jQuery очень похожи в том смысле, что обе они выполняют манипуляции с DOM с помощью цепочки объектов.

Мне любопытно узнать, какие функции D3 делает проще, чем jQuery, и наоборот. Существует множество библиотек для построения графиков и визуализации, которые используют jQuery в качестве основы (например,высокие диаграммы, плавать, Wijmo).

Приведите конкретные примеры того, чем они отличаются.

• D3 управляется данными, а jQuery - нет: с jQuery вы напрямую управляете элементами, но с D3 вы предоставляете данные и обратные вызовы через уникальные D3 data(), enter()а exit()методы и D3 манипулируют элементами.

• D3 обычно используется для визуализации данных, но jQuery используется для создания веб-приложений. D3 имеет множество расширений для визуализации данных, а jQuery имеет множество плагинов для веб-приложений.

• Оба являются библиотеками для манипуляций с DOM JavaScript, имеют селекторы CSS и свободный API и основаны на веб-стандартах, что делает их похожими.

Следующий код - это пример использования D3, что невозможно с jQuery (попробуйте в 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 имеет глупое описание. jQuery и d3 совсем не похожи, вы просто не используете их для одного и того же.

Цель jQuery - выполнять общие манипуляции с dom. Это универсальный набор инструментов javascript для всего, что вы можете захотеть сделать.

d3 был в первую очередь разработан, чтобы упростить построение блестящих графиков с данными. Вам обязательно следует использовать его (или что-то подобное, или что-то на его основе), если вы хотите делать графические визуализации данных.

Если вам нужна библиотека JS общего назначения для всех ваших потребностей в интерактивных формах, рассмотрите jQuery, proto или mootools. Если вам нужно что-то крошечное, подумайте о underscore.js. Если вам нужно что-то с внедрением зависимостей и возможностью тестирования, рассмотрите AngularJS.

Общее сравнение гид из википедии.

Я понимаю, почему кто-то может подумать, что они похожи. Они используют аналогичный синтаксис селектора - $ ('SELECTOR'), а d3 - чрезвычайно мощный инструмент для выбора, фильтрации и работы с элементами html, особенно при объединении этих операций вместе. d3 пытается объяснить вам это на своей домашней странице, называя себя библиотекой общего назначения, но факт в том, что большинство людей используют ее, когда хотят строить графики . Довольно необычно использовать его для обычных манипуляций с dom, потому что кривая обучения d3 очень крутая. Однако это гораздо более общий инструмент, чем jQuery, и обычно люди создают другие более конкретные библиотеки (например, nvd3) поверх d3, а не используют его напрямую.

Ответ @ JohnS тоже очень хорош. Fluent API = объединение методов. Я также согласен с тем, как плагины и расширения приведут вас к библиотекам.

В последнее время я немного использовал и то, и другое. Поскольку d3 использует селекторы Sizzle, вы можете в значительной степени путать селекторы.

Просто имейте в виду, что d3.select ('# mydiv') не возвращает то же самое, что jQuery ('# mydiv'). Это тот же элемент DOM, но он создается с помощью разных конструкторов. Например, допустим, у вас есть следующий элемент:

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

И давайте возьмем несколько общих методов:

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

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

Выглядит вполне законно. Но если пойти немного дальше:

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

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

D3 - это не только визуальные графики. Документы на основе данных. Когда вы используете d3, вы привязываете данные к узлам dom. Благодаря SVG мы можем строить графики, но D3 - это гораздо больше. Вы можете заменить такие фреймворки, как Backbone, Angular и Ember, на использование D3.

Не уверен, кто проголосовал против, но позвольте мне внести ясность.

Многие веб-сайты запрашивают данные с сервера, которые обычно поступают из базы данных. Когда веб-сайт получает эти данные, мы должны выполнить обновление страницы с новым содержанием. Многие фреймворки делают то же самое, и d3 тоже. Поэтому вместо использования элемента svg вы можете использовать вместо него элемент html. Когда вы вызываете перерисовку, она быстро обновляет страницу новым содержимым. Приятно не иметь лишних накладных расходов, таких как jquery, backbone + его плагины, angular и т. Д. Вам нужно знать только d3. Теперь d3 не имеет встроенной системы маршрутизации. Но вы всегда можете его найти.

С другой стороны, Jquery имеет единственную цель - писать меньше кода. Это всего лишь сокращенная версия javascript, протестированная во многих браузерах. Если на вашей веб-странице не так много jquery. Это отличная библиотека для использования. Это просто и требует больших усилий при разработке javascript для нескольких браузеров.

Если вы попытались реализовать jquery в стиле d3, он будет довольно медленным, поскольку он не предназначен для этой задачи, аналогично, d3 не предназначен для отправки данных на серверы, он предназначен только для потребления и отображения данных. .

d3 предназначен для визуализации данных, он делает это путем фильтрации объектов DOM и применения преобразований.

jQuery создан для манипуляции с DOM и упрощает выполнение многих основных задач JS.

Если вы хотите превратить данные в красивые интерактивные картинки, D3 - это здорово.

Если вы хотите переместить, манипулировать или иным образом изменить свою веб-страницу, jQuery - ваш инструмент.

Отличный вопрос!

Хотя обе библиотеки имеют много одинаковых функций, мне кажется, что самая большая разница между jQuery и D3 - это фокус.

jQuery - это библиотека общего назначения, ориентированная на кроссбраузерность и простоту использования.

D3 ориентирован на данные (манипулирование и визуализация) и поддерживает только современные браузеры. И хотя он похож на jQuery, его намного сложнее использовать.

Оба могут решать одну и ту же цель создания и управления DOM (будь то HTML или SVG). D3 представляет собой API, который упрощает общие задачи, которые вы выполняете при создании / управлении DOM на основе данных. Это достигается благодаря встроенной поддержке привязки данных с помощью функции data (). В jQuery вам придется вручную обрабатывать данные и определять способ привязки к данным, чтобы сгенерировать DOM. Из-за этого ваш код становится более процедурным, и его становится труднее рассуждать и следовать. С D3 меньше шагов / кода и более декларативно. D3 также предоставляет некоторые функции более высокого уровня, которые помогают в создании визуализации данных в SVG. Такие функции, как range (), domain () и scale (), упрощают получение данных и их отображение на графике. Такие функции, как axis (), также упрощают рисование общих элементов пользовательского интерфейса, которые вы ожидаете от диаграммы / графика.