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

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

http://vallandingham.me/stepper_steps.html

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

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

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

Ответ 1

D3 управляется данными, но jQuery не является: с jQuery вы напрямую управляете элементами, но с D3 вы предоставляете данные и обратные вызовы через уникальные методы data(), enter() и exit() D3, а D3 управляет элементами.
D3 обычно используется для визуализации данных, но jQuery используется для создания веб-приложений. D3 имеет множество расширений для визуализации данных, а у jQuery много плагинов веб-приложений.
Оба являются библиотеками JavaScript DOM, имеют селектор 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();

Ответ 2

d3 имеет глупые описания. jQuery и d3 совсем не похожи, вы просто не используете их для одних и тех же вещей.

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

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

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

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

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

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

Ответ 3

Я использовал немного в последнее время. Поскольку 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"}

Ответ 4

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

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

Если вы хотите превратить данные в красивые интерактивные снимки, D3 является потрясающим.

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

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

Ответ 7

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