Построение графиков

Для построения графиков с помощью Snap.svg первым шагом является создание SVG-холста. Snap.svg предоставляет удобный конструктор Snap(), который принимает ширину и высоту холста или селектор существующего элемента DOM:

var s = Snap(800, 600); // создание холста 800x600 пикселей

Также можно привязать холст к существующему <svg> в HTML:

var s = Snap("#mySvg"); // #mySvg — id элемента <svg> в DOM

Холст является контейнером для всех графических элементов, включая линии, кривые, прямоугольники, текст и другие фигуры.

Построение осей графика

Оси графика обычно создаются с помощью метода line(x1, y1, x2, y2):

var xAxis = s.line(50, 550, 750, 550); // горизонтальная ось X
var yAxis = s.line(50, 50, 50, 550);   // вертикальная ось Y

xAxis.attr({ stroke: "#000", strokeWidth: 2 });
yAxis.attr({ stroke: "#000", strokeWidth: 2 });

Для визуального улучшения осей можно добавить стрелки, деления и подписи:

for (var i = 1; i <= 10; i++) {
    var x = 50 + i * 70;
    var tick = s.line(x, 545, x, 555);
    tick.attr({ stroke: "#000", strokeWidth: 1 });
    s.text(x, 570, (i * 10).toString()).attr({ "font-size": 12 });
}

Построение линий и кривых графика

Snap.svg позволяет создавать линии и кривые с помощью метода path(). Для линейного графика используется строка команд M и L:

var data = [10, 30, 25, 50, 40, 60, 55]; // значения графика
var pathStr = "M50," + (550 - data[0]*5); // начальная точка

for (var i = 1; i < data.length; i++) {
    var x = 50 + i * 100;
    var y = 550 - data[i] * 5;
    pathStr += " L" + x + "," + y;
}

var graphLine = s.path(pathStr);
graphLine.attr({ stroke: "#1E90FF", strokeWidth: 2, fill: "none" });

Для плавных кривых используется метод C (кубические кривые Безье):

var smoothPath = "M50," + (550 - data[0]*5);
for (var i = 1; i < data.length; i++) {
    var x1 = 50 + (i - 1) * 100 + 50;
    var y1 = 550 - data[i-1]*5;
    var x2 = 50 + i * 100 - 50;
    var y2 = 550 - data[i]*5;
    var x = 50 + i * 100;
    var y = 550 - data[i]*5;
    smoothPath += " C" + x1 + "," + y1 + " " + x2 + "," + y2 + " " + x + "," + y;
}

var smoothLine = s.path(smoothPath);
smoothLine.attr({ stroke: "#FF4500", strokeWidth: 2, fill: "none" });

Добавление точек данных

Для визуального выделения точек на графике используется circle(cx, cy, r):

data.forEach(function(value, index) {
    var cx = 50 + index * 100;
    var cy = 550 - value * 5;
    s.circle(cx, cy, 4).attr({ fill: "#FF4500", stroke: "#000", strokeWidth: 1 });
});

Подписи и легенда

Snap.svg позволяет добавлять текстовые подписи с помощью метода text(x, y, content):

s.text(400, 30, "График значений").attr({
    "font-size": 18,
    "font-weight": "bold",
    "text-anchor": "middle"
});

Для легенды можно использовать комбинацию прямоугольников и текста:

var legendX = 600, legendY = 50;
s.rect(legendX, legendY, 20, 10).attr({ fill: "#1E90FF" });
s.text(legendX + 30, legendY + 10, "Линейный график").attr({ "font-size": 12 });

s.rect(legendX, legendY + 20, 20, 10).attr({ fill: "#FF4500" });
s.text(legendX + 30, legendY + 30, "Сглаженный график").attr({ "font-size": 12 });

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

Графики часто требуют перевода данных в координаты SVG. Snap.svg не предоставляет встроенных функций для масштабирования, поэтому создается простая функция:

function scaleY(value, minData, maxData, minCanvas, maxCanvas) {
    return maxCanvas - (value - minData) / (maxData - minData) * (maxCanvas - minCanvas);
}

function scaleX(index, totalPoints, minCanvas, maxCanvas) {
    return minCanvas + index / (totalPoints - 1) * (maxCanvas - minCanvas);
}

Эти функции позволяют гибко отображать данные любой величины на графике.

Анимация графиков

Snap.svg поддерживает анимацию атрибутов через метод animate():

graphLine.attr({ strokeDasharray: "1000", strokeDashoffset: "1000" });
graphLine.animate({ strokeDashoffset: 0 }, 2000, mina.easeinout);

Анимация точек может включать появление с постепенным увеличением радиуса:

data.forEach(function(value, index) {
    var cx = 50 + index * 100;
    var cy = 550 - value * 5;
    var point = s.circle(cx, cy, 0).attr({ fill: "#FF4500" });
    point.animate({ r: 4 }, 500, mina.easein);
});

Работа с интерактивностью

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

graphLine.hover(
    function() { this.attr({ stroke: "#32CD32" }); },
    function() { this.attr({ stroke: "#1E90FF" }); }
);

s.selectAll("circle").forEach(function(c) {
    c.click(function() {
        alert("Значение точки: " + (550 - this.attr("cy")) / 5);
    });
});

Это позволяет реализовать всплывающие подсказки и динамическое выделение элементов при наведении.

Сгруппированные элементы и трансформации

Snap.svg поддерживает создание групп через g() и применение трансформаций:

var group = s.g(graphLine);
data.forEach(function(value, index) {
    var cx = 50 + index * 100;
    var cy = 550 - value * 5;
    var circle = s.circle(cx, cy, 4).attr({ fill: "#FF4500" });
    group.add(circle);
});

group.transform("t50,0 s1.2,1.2"); // смещение и масштабирование всей группы

Группы упрощают управление сложными графиками и применяют анимации к целому набору элементов сразу.

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

Оглавление