Интерактивные графики

Snap.svg — это мощная библиотека для работы с SVG в JavaScript, которая позволяет создавать динамические и интерактивные графики. Она предоставляет высокоуровневый API для манипуляций с элементами SVG, включая трансформации, анимации и события.

Создание SVG-контейнера

Первый шаг — инициализация SVG-контейнера:

var s = Snap("#svgContainer");

Здесь #svgContainer — это идентификатор <svg> в HTML. Snap.svg автоматически связывает объект s с этим контейнером, позволяя добавлять элементы через API библиотеки.

Рисование базовых фигур

Snap.svg поддерживает создание всех основных SVG-элементов:

  • Прямоугольники:
var rect = s.rect(50, 50, 200, 100);
rect.attr({
    fill: "#4CAF50",
    stroke: "#000",
    strokeWidth: 2
});
  • Круги:
var circle = s.circle(150, 150, 75);
circle.attr({
    fill: "red",
    stroke: "black",
    strokeWidth: 3
});
  • Линии и пути:
var line = s.line(0, 0, 200, 200);
line.attr({
    stroke: "#2196F3",
    strokeWidth: 2
});

var path = s.path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path.attr({
    fill: "none",
    stroke: "#FF5722",
    strokeWidth: 3
});

Группировка элементов

Для сложных графиков удобно использовать группы (<g>). Snap.svg позволяет объединять элементы:

var group = s.group(rect, circle);
group.transform("t50,50"); // Смещение всей группы на 50px по X и Y

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

Интерактивность через события

Snap.svg поддерживает стандартные DOM-события:

circle.hover(
    function() { this.attr({fill: "orange"}); },  // при наведении
    function() { this.attr({fill: "red"}); }      // при уходе курсора
);

rect.click(function() {
    this.attr({stroke: "#FFEB3B"});
});

Поддерживаются события: click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup.

Анимации и трансформации

Snap.svg предоставляет мощный механизм анимаций через метод animate():

circle.animate({ r: 100, fill: "#00BCD4" }, 1000, mina.easeinout);
  • r: 100 — конечное значение радиуса.
  • 1000 — продолжительность анимации в миллисекундах.
  • mina.easeinout — тип функции интерполяции для плавности движения.

Для групп и отдельных элементов можно использовать трансформации:

group.transform("r45,150,150"); // поворот группы на 45° вокруг точки (150,150)

Динамическое изменение графика

Интерактивные графики часто требуют обновления данных. Snap.svg позволяет менять атрибуты элементов в реальном времени:

function updateBar(bar, value) {
    bar.animate({ height: value }, 500, mina.easein);
}

var bar = s.rect(50, 200, 40, 100);
updateBar(bar, 150);  // плавное изменение высоты

Для линейных графиков можно использовать метод attr для обновления координат точек:

var linePath = s.path("M10,200 L50,150 L90,180");
linePath.attr({stroke: "#673AB7", fill: "none"});

linePath.animate({ d: "M10,200 L50,100 L90,160" }, 800, mina.easeinout);

Работа с текстом и подписями

Snap.svg поддерживает добавление текста и стилизацию:

var text = s.text(100, 50, "Значение: 42");
text.attr({
    fill: "#000",
    fontSize: "16px",
    fontFamily: "Arial"
});

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

Интерактивные диаграммы

Используя все перечисленные инструменты, можно создавать интерактивные диаграммы:

var data = [120, 80, 150, 60, 200];
var bars = [];

data.forEach(function(value, index) {
    var bar = s.rect(50 + index * 60, 250 - value, 40, value);
    bar.attr({ fill: "#03A9F4" });

    bar.hover(
        function() { this.attr({fill: "#FF9800"}); },
        function() { this.attr({fill: "#03A9F4"}); }
    );

    bars.push(bar);
});

В этом примере каждая колонка диаграммы реагирует на наведение курсора, изменяя цвет, и легко поддается динамическим обновлениям через animate().

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

Snap.svg удобно использовать вместе с JSON или API для построения графиков на лету:

fetch("/data.json")
    .then(response => response.json())
    .then(data => {
        data.forEach((item, i) => {
            var circle = s.circle(50 + i*60, 200 - item.value, 20);
            circle.attr({fill: "#E91E63"});
        });
    });

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

Поддержка событий drag-and-drop

Для интерактивных элементов можно включать перетаскивание:

circle.drag(
    function(dx, dy) { this.attr({cx: this.data('startX') + dx, cy: this.data('startY') + dy}); },
    function() { this.data('startX', this.attr('cx')); this.data('startY', this.attr('cy')); },
    function() {}
);

Метод drag() принимает три функции: onmove, onstart и onend, позволяя управлять поведением объекта при перетаскивании.

Snap.svg предоставляет полный набор инструментов для создания интерактивных графиков: от простых столбчатых диаграмм до сложных динамических визуализаций с анимацией и событиями. С помощью комбинации фигур, трансформаций, анимаций и обработки событий можно реализовать визуализации любой сложности, полностью управляемые через JavaScript.

Оглавление