Создавая визуализации или интерактивные страницы, мы часто используем комбинацию из jQuery и D3. Причём в основном используется D3, а из jQuery берут небольшой набор функций для манипуляций с DOM.
И хотя в D3 есть мощные возможности – селекторы и обёртка для ajax, часто нам не хватает каких-то функций из jQuery. Мы покажем, как можно заменить jQuery, используя D3 повсеместно. В результате ваш код упростится, объём проекта уменьшится, и вы не будете смешивать разные подходы, а будете использовать функции так, как принято в D3.
Для начала рассмотрим, в чём эти две библиотеки сходятся. Это удобно для тех, кто уже знает jQuery, и хочет изучить D3.
Схожести
Селекторы
Обе библиотеки основаны на простых в использовании, но богатых на возможности селекторах.
jQuery
$('.foo').addClass('foobar');
$('.foo').removeClass('foobar');
D3
d3.selectAll('.foo').classed('foobar', true);
d3.selectAll('.foo').classed('foobar', false);
Управление стилями и атрибутами
jQuery
$('.foo').attr('data-type', 'foobar');
$('.foo').css('background', '#F00');
D3
d3.selectAll('.foo').attr('data-type', 'foobar');
d3.selectAll('.foo').style('background', '#F00');
Читать дальше →
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Читать дальше →
