Data-атрибуты

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

Установка и получение данных

Для любого элемента SVG доступ к data-атрибутам осуществляется методами .data():

const draw = SVG().addTo('body').size(400, 400);
const circle = draw.circle(100).fill('#f06');

// Установка данных
circle.data('id', 123);
circle.data('description', 'Красный круг');

// Получение данных
console.log(circle.data('id'));          // 123
console.log(circle.data('description')); // "Красный круг"

Метод .data() может работать как с отдельными ключами, так и с объектами:

circle.data({
    type: 'circle',
    status: 'active'
});

console.log(circle.data('type'));   // "circle"
console.log(circle.data('status')); // "active"

Изменение и удаление data-атрибутов

Любой существующий data-атрибут можно изменить простым присвоением нового значения через .data():

circle.data('status', 'inactive');
console.log(circle.data('status')); // "inactive"

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

circle.removeData('status');
console.log(circle.data('status')); // undefined

Можно удалять несколько атрибутов одновременно, передав массив ключей:

circle.removeData(['id', 'description']);

Получение всех data-атрибутов

Метод .data() без аргументов возвращает объект со всеми установленными атрибутами элемента:

circle.data({
    role: 'highlight',
    owner: 'admin'
});

console.log(circle.data());
// { role: "highlight", owner: "admin" }

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

Связь с HTML data-атрибутами

При необходимости data-атрибуты SVG.js можно синхронизировать с HTML-атрибутами data-* в DOM. Для этого используется метод .attr():

circle.attr('data-role', 'interactive');
console.log(circle.attr('data-role')); // "interactive"

При этом .data() и .attr('data-...') работают независимо: .data() хранит значения в объекте внутри SVG.js, а .attr() записывает их непосредственно в DOM.

Использование data-атрибутов в анимации и событиях

Data-атрибуты часто применяются для хранения состояния элементов при анимациях или обработке событий:

circle.data('clicked', false);

circle.on('click', function() {
    const state = this.data('clicked');
    this.data('clicked', !state);
    this.fill(state ? '#f06' : '#0f6');
});

Такой подход позволяет избегать глобальных переменных и хранить состояние локально в элементах SVG.

Передача сложных объектов

Data-атрибуты поддерживают не только строки и числа, но и объекты или массивы. Это делает возможным хранение сложных структур:

circle.data('meta', { x: 50, y: 75, tags: ['active', 'highlight'] });

console.log(circle.data('meta').tags[1]); // "highlight"

При этом библиотека корректно сериализует и десериализует данные, позволяя безопасно манипулировать вложенными структурами.

Перебор элементов с данными

Для работы с группами объектов SVG удобно использовать методы фильтрации по data-атрибутам:

const group = draw.group();
group.circle(50).data('category', 'A');
group.rect(60, 60).data('category', 'B');
group.ellipse(70, 40).data('category', 'A');

group.each(function(i, children) {
    if (this.data('category') === 'A') {
        this.fill('#ff0');
    }
});

Метод .each() позволяет обрабатывать каждый элемент группы, а доступ к data-атрибутам делает возможным выборку по любым критериям.

Практические советы

  • Использовать .data() для хранения временных или логических данных, которые не должны отображаться в DOM напрямую.
  • Использовать .attr('data-...'), если требуется, чтобы данные были доступны через стандартные селекторы DOM (querySelector, dataset).
  • Хранение сложных объектов в data-атрибутах полезно при построении интерактивных графиков, визуальных редакторов и SVG-анимаций.
  • Регулярно очищать ненужные data-атрибуты через .removeData() для предотвращения утечек памяти при динамическом создании и удалении объектов.

Эти возможности делают data-атрибуты ключевым инструментом управления состоянием элементов SVG в JavaScript и позволяют строить интерактивные, динамичные визуальные интерфейсы с высокой гибкостью.

Оглавление