Посилаючись на цей приклад:
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 має багато плагінів веб-додатків.
Обидві бібліотеки 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();d3 має дурний опис. jQuery і d3 зовсім не схожі, ви просто не використовуєте їх для одних і тих же речей.
Метою jQuery є проведення загальних маніпуляцій з домом. Це загальний набір інструментів JavaScript для всього, що ви можете зробити.
d3 був розроблений в першу чергу для спрощення складання блискучих графіків за допомогою даних. Ви обов'язково повинні використовувати його (або щось подібне або щось побудоване на ньому), якщо ви хочете зробити графічні візуалізації даних.
Якщо ви хочете, щоб бібліотека JS загального призначення для всіх ваших потреб інтерактивної форми, розгляньте jQuery або прото або mootools. Якщо ви хочете чогось крихітного, розгляньте сторінку underscore.js. Якщо ви хочете чогось із введенням залежності та встановлення залежності, врахуйте AngularJS.
загальне порівняння гід з вікіпедії.
Я бачу, чому хтось подумає, що вони схожі. Вони використовують аналогічний синтаксис селектора - $ ('SELECTOR'), а d3 - надзвичайно потужний інструмент для вибору, фільтрації та роботи з елементами html, особливо під час з'єднання цих операцій разом. d3 намагається пояснити це на своїй домашній сторінці, стверджуючи, що це бібліотека загального призначення, але факт полягає в тому, що більшість людей використовують її, коли хочуть робити графіки . Досить незвично використовувати його для вашої середньої маніпуляції з домом, оскільки крива навчання d3 настільки крута. Однак це набагато більш загальний інструмент, ніж jQuery, і зазвичай люди будують інші більш конкретні бібліотеки (наприклад, nvd3) поверх d3, а не використовують його безпосередньо.
@ Відповідь Джонса також дуже хороша. 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"}.attr('data-hash', '654687867asaj')
.data()в jQuery - це в основному ярлик для доступу до HTML-атрибуту data-<custom-name>. Але в D3 це не має нічого спільного з атрибутами даних html, і те, що він робить у D3, повертає новий вибір як об'єднання даних, переданих у аргументах з уже вибраними елементами.
D3 стосується не лише візуальних графіків. Документи, керовані даними. Коли ви використовуєте d3, ви прив'язуєте дані до вузлів dom. Через SVG ми можемо скласти графіки, але D3 - це набагато більше. Ви можете замінити рамки типу Backbone, Angular та Ember за допомогою D3.
Не впевнений, хто проголосував, але дозвольте додати ще ясності.
Багато веб-сайтів запитують дані з сервера, які зазвичай надходять із бази даних. Коли веб-сайт отримує ці дані, ми повинні зробити оновлення сторінки нового вмісту. Багато фреймворків це роблять, і d3 робить це також. Тому замість елемента svg ви можете використовувати html-елемент. Коли ви зателефонуєте до перемальовки, вона швидко оновить сторінку новим вмістом. Це справді приємно не мати всіх зайвих накладних витрат, таких як jquery, магістраль + його плагіни, кутові тощо. Ви повинні знати лише d3. Тепер у d3 немає системи маршрутизації. Але завжди можна знайти його.
Jquery, з іншого боку, єдина мета - написати менше коду. Це лише коротка версія версії javascript, яка була протестована у багатьох браузерах. Якщо на вашій веб-сторінці не дуже багато запитань. Це чудова бібліотека для використання. Це просто і вимагає багато болю від розробки 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. Такі функції, як діапазон (), домен () та масштаб (), спрощують отримання даних та побудову їх на графіку. Такі функції, як ось (), також полегшують малювання загальних елементів інтерфейсу, яких ви очікували на графіку / графіку.