Графическая библиотека D3.js

Опубликовано от

 

D3.js - это библиотека JavaScript для управления документами на основе данных. D3 помогает оживить данные с помощью JS, SVG и CSS, сочетая мощные компоненты визуализации и управляемый данными подход к манипуляции с DOM.




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

Если вы не знакомы с SVG, работать с данной технологией будет относительно не сложно. SVG позволяет использовать готовые блоки (линии, круги, прямоугольники и т.д.) для создания графики.



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

D3 использует декларативный подход, работая с произвольными наборами узлов, называемыми выборками или fluent interface. При написании кода такой подход выглядит как цепочка методов. Каждый метод вызывается на объекте, который вернул предыдущий. Чтобы код было удобно читать, каждый вызов располагается на отдельной строке. Узлы выбираются по имени тега. Элементы могут быть выбраны с использованием множества предикатов. D3 предоставляет множество методов для изменения узлов: установка атрибутов или стилей, удаление или сортировка узлов.

Пример подхода fluent interface

     d3.select(‘body’)

        .append(‘svg’)

        .append(‘text’)

        .text(‘Click somewhere, please...’)

        .attr(‘x’,50) .attr(‘y’,50)

        .style(‘fill’,’firebick’);


    В D3, как и в других JS-библиотеках, работающих с DOM-элементами, взаимодействие с документом начинается с поиска элементов в документе и создания выборки — обёртки набора элементов. Она даёт доступ к методам библиотеки для модификации выбранных элементов. Выборка (selection) в D3 создается с помощью методов d3. select() и d3.selectAll().

Пример использования библиотеки D3

HTML разметка:

<span>будет зеленым </span>

<p>

          <span> будет красным </span>

          <span> эти </span>

<span>будут</span>

<span>желтыми</span>

</p>

<p> останется черным</p>


JavaScript+D3

    d3.select(‘span’).style(‘color’,‘darkgreen’)

    d3.selectAll(‘p’).selectAll(‘span’).style(‘color’,’goldenrod’)

    d3.select(‘p’).select(‘span’).style(‘color’,’firebrick’ 


D3 работает чрезвычайно быстро, поддерживает большие наборы данных и динамическое поведение для взаимодействия и анимации.  Библиотека основана прежде всего на использовании JavaScript, SVG и CSS в противовес другим подобным библиотекам, которые вместо SVG используют элемент canvas и его возможности. Если стандартные механизмы рисования, например, элемент canvas, полагаются на пиксели, то svg использует векторы. Применение SVG позволяет создавать структуры с насыщенной графикой, обладающие анимацией и возможностями взаимодействия.

По сравнению с пиксельной графикой SVG обладает рядом преимуществ. В частности, SVG основан на xml, что делает его более читабельным. Кроме того, код SVG более легковесный по сравнению файлами изображений.

Во многом благодаря этому D3 в настоящее время является одним из наиболее популярных фреймворков, используемых для графической обработки данных и создания всякого рода диаграмм и графиков.