В чем разница между D3 и jQuery?
ссылаясь на этот пример:
http://vallandingham.me/stepper_steps.html
похоже, что библиотеки D3 и jQuery очень похожи в том смысле, что они оба выполняют манипуляции DOM в цепочке объектов.
Мне любопытно узнать, какие функции D3 делает проще, чем jQuery, и наоборот. Существует множество графических и визуализационных библиотек, которые используют jQuery в качестве основы (например, highcharts, flot, wijmo).
пожалуйста, приведите конкретные примеры того, как они отличаются.
7 ответов:
Д3 данными но jQuery нет: с jQuery вы напрямую манипулировать элементы, но с D3 вы предоставляете данные и обратные вызовы через D3 уникальный
data(),enter()иexit()методы и D3 манипулирует элементами.D3 обычно используется для визуализации данных, но jQuery используется для создания веб-приложений. D3 имеет много расширений визуализации данных и jQuery имеет много веб-приложений подключаемый модуль.
оба являются библиотеками манипуляций JavaScript DOM, имеют селекторы CSS и fluent 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. Если вы хотите что-то крошечное, рассмотрите подчеркивание.js. Если вы хотите что-то с инъекцией зависимостей и тестируемостью, рассмотрите AngularJS.
A сравнение руководство из Википедии.
Я могу понять, почему кто-то думает, что они похожи. Они используют аналогичный синтаксис селектора -- $('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 предназначен для визуализации данных, он делает это путем фильтрации через объекты DOM и применения преобразований.
jQuery сделано для манипуляции DOM и делает жизнь легче для многих основных задач JS.
Если вы хотите превратить данные в красивые, интерактивные картинки, D3 является удивительным.
Если вы хотите переместить, манипулировать или иным образом изменить свою веб-страницу, jQuery-это ваш инструмент.
D3-это не только визуальные графики. Документы, Управляемые Данными. При использовании d3 выполняется привязка данных к узлам dom. Из-за SVG мы можем делать графики, но D3-это гораздо больше. Вы можете заменить фреймворки, такие как Backbone, Angular и Ember, с помощью D3.
Не уверен, кто вниз проголосовали, но позвольте мне добавить еще немного ясности.
многие сайты запрашивают данные с сервера, который обычно приходит из базы данных. Когда сайт получает эти данные, мы должны сделать обновление страницы новое содержание. Многие фреймворки делают это, и d3 делает это также. Поэтому вместо того, чтобы использовать SVG элемента, можно использовать HTML-элемент. Когда вы вызываете перерисовку, она быстро обновляет страницу с новым контентом. Очень приятно не иметь всех дополнительных накладных расходов, таких как jquery, backbone + его плагины, angular и т. д. Вам нужно только знать d3. Теперь у d3 нет системы маршрутизации, запеченной в нем. Но вы всегда можете найти его.
Jquery с другой стороны, это единственная цель-написать меньший объем кода. Это просто короткая ручная версия javascript, которая была протестирована во многих браузерах. Если у вас нет большого количества jquery на вашей веб-странице. Это отличная библиотека для использования. Это просто и требует много усилий от разработки javascript для нескольких браузеров.
Если вы попытались реализовать jquery в D3, как мода, это будет довольно медленно, так как он не был разработан для этой задачи, аналогично, d3 не предназначен для отправки данных на серверы, он предназначен только для потребления и визуализации данные.
большой вопрос!
хотя обе библиотеки имеют много одинаковых функций, мне кажется, что самая большая разница между jQuery и D3-это фокус.
jQuery-это библиотека общего назначения с акцентом на кроссбраузерность и удобство в использовании.
D3 ориентирован на данные (манипуляции и визуализацию) и поддерживает только современные браузеры. И хотя он выглядит как jQuery, его гораздо сложнее использовать.
оба могут решить одну и ту же цель создания и управления DOM (будь то HTML или SVG). D3 создает API, который упрощает общие задачи, которые вы будете выполнять при создании/управлении DOM на основе данных. Он делает это через собственную поддержку привязки данных через функцию data (). В jQuery вам нужно будет вручную обработать данные и определить, как привязать их к данным, чтобы создать DOM. Из-за этого ваш код становится более процедурным и сложнее рассуждать и следовать. С D3 это меньше шагов / кода и более декларативно. D3 также предоставляет некоторые функции более высокого уровня, которые помогают в создании визуализации данных в SVG. Такие функции,как range (), domain () и scale (), облегчают сбор данных и построение их на графике. Такие функции, как axis (), также облегчают рисование общих элементов пользовательского интерфейса, которые вы ожидаете в диаграмме/графике. Есть много других библиотек api более высокого уровня, которые находятся на вершине D3, чтобы помочь в более сложных визуализациях данных, включая интерактивные поведение и анимация.