Визуализация данных

Библиотека SVG.js предоставляет мощный и интуитивно понятный интерфейс для работы с векторной графикой в браузере. Основное преимущество SVG заключается в том, что все элементы остаются масштабируемыми и интерактивными без потери качества. SVG.js упрощает создание графиков, диаграмм и интерактивных визуализаций с помощью методов высокого уровня.

Создание холста

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

const draw = SVG().addTo('#drawing').size(800, 600);

Здесь #drawing — это идентификатор HTML-элемента (обычно <div>), а .size() задаёт размеры холста. Холст может быть динамически адаптирован к размеру родительского контейнера, что удобно для отзывчивого дизайна.

Добавление простых фигур

SVG.js позволяет создавать базовые графические элементы:

  • Прямоугольник
const rect = draw.rect(200, 100).attr({ fill: '#3498db', stroke: '#2c3e50', 'stroke-width': 3 });
  • Круг
const circle = draw.circle(80).attr({ fill: '#e74c3c', cx: 150, cy: 150 });
  • Линия
const line = draw.line(50, 50, 300, 300).stroke({ color: '#27ae60', width: 4 });
  • Текст
const text = draw.text('Пример текста').move(100, 50).font({ size: 24, family: 'Arial' });

Создание графиков и диаграмм

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

Линейный график

const data = [10, 40, 30, 70, 50];
const spacing = 100;

let pathString = 'M0,' + (200 - data[0]);
data.forEach((value, i) => {
    if(i > 0) pathString += ' L' + (i * spacing) + ',' + (200 - value);
});

draw.path(pathString).fill('none').stroke({ color: '#2980b9', width: 2 });

Здесь path используется для создания кривой линии, которая соединяет точки данных. Метод stroke() задаёт цвет и ширину линии.

Столбчатая диаграмма

const dataBars = [50, 75, 100, 60];
dataBars.forEach((value, i) => {
    draw.rect(40, value).attr({ fill: '#8e44ad' }).move(i * 60, 200 - value);
});
  • Ширина каждого столбца задаётся первой величиной rect(ширина, высота).
  • Положение определяется методом move(x, y), где y корректируется, чтобы столбцы росли вверх.

Круговая диаграмма

const dataPie = [30, 70, 45, 55];
const total = dataPie.reduce((a, b) => a + b, 0);
let angle = 0;

dataPie.forEach((value, i) => {
    const sliceAngle = (value / total) * 360;
    const endAngle = angle + sliceAngle;

    const x1 = 200 + 100 * Math.cos(angle * Math.PI / 180);
    const y1 = 200 + 100 * Math.sin(angle * Math.PI / 180);
    const x2 = 200 + 100 * Math.cos(endAngle * Math.PI / 180);
    const y2 = 200 + 100 * Math.sin(endAngle * Math.PI / 180);

    const largeArc = sliceAngle > 180 ? 1 : 0;
    const pathData = `M200,200 L${x1},${y1} A100,100 0 ${largeArc},1 ${x2},${y2} Z`;

    draw.path(pathData).fill(['#e74c3c','#3498db','#2ecc71','#f1c40f'][i]);
    angle = endAngle;
});
  • Используется метод path() для построения дуг.
  • Аргумент A в строке pathData задаёт эллиптическую дугу с указанием радиуса, угла и направления.

Анимация и интерактивность

SVG.js поддерживает анимацию объектов через метод .animate():

rect.animate(2000, '<>').move(400, 300).attr({ fill: '#f39c12' });
  • Первый аргумент — длительность анимации в миллисекундах.
  • Второй аргумент — функция ускорения (<> — плавная).
  • Можно анимировать позицию, размер, цвет и другие атрибуты одновременно.

Для интерактивности используется метод .on():

circle.on('mouseover', () => circle.fill({ color: '#2ecc71' }));
circle.on('mouseout', () => circle.fill({ color: '#e74c3c' }));

Это позволяет динамически менять визуальные характеристики при наведении мыши или клике.

Работа с группами и слоями

SVG.js позволяет объединять элементы в группы для упрощения управления:

const group = draw.group();
group.add(draw.rect(50,50).fill('#3498db'));
group.add(draw.circle(30).fill('#e74c3c').move(25,25));

group.animate(1000).move(200,200);
  • Группы позволяют перемещать и анимировать несколько объектов как единое целое.
  • Удобно для создания сложных графиков и диаграмм с многослойными элементами.

Масштабирование и координатные системы

SVG.js поддерживает трансформации:

rect.scale(1.5, 2); // масштаб по X и Y
circle.rotate(45, 150, 150); // вращение вокруг точки (150,150)
  • Масштабирование полезно для динамического увеличения графиков.
  • Вращение и сдвиг упрощают построение интерактивных диаграмм, например круговых графиков или стрелок на линейных графиках.

Интеграция с данными

Для динамических визуализаций данные часто загружаются из JSON или API:

fetch('/data.json')
    .then(res => res.json())
    .then(data => {
        data.forEach((item, i) => {
            draw.rect(40, item.value).move(i * 50, 200 - item.value).fill(item.color);
        });
    });
  • SVG.js легко интегрируется с любыми источниками данных.
  • Позволяет строить графики в реальном времени, обновляя элементы через .attr() или .animate().

Оптимизация и производительность

  • Использовать .group() для управления множеством элементов и уменьшения числа DOM-операций.
  • Предварительно рассчитывать координаты, чтобы минимизировать вызовы метода path() в циклах.
  • Для больших объемов данных применять requestAnimationFrame для анимаций, чтобы избежать блокировки интерфейса.

SVG.js сочетает в себе простоту API с мощными возможностями визуализации. Она позволяет строить интерактивные графики и диаграммы, управлять анимацией, группировать элементы и работать с динамическими данными, сохраняя при этом масштабируемость и качество графики.

Оглавление