Полный список методов селекции

Методы селекции в библиотеке Vex

Vex — это библиотека для работы с визуальными элементами в JavaScript, которая активно используется для построения и манипуляции графами. Одной из важных частей библиотеки является система селекции, которая позволяет выбирать, изменять и взаимодействовать с элементами графа. Методы селекции предоставляют разработчику гибкость в работе с узлами, рёбрами и другими компонентами графа.

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

Основные методы селекции

1. select(selector)

Метод select используется для выбора элементов графа на основе CSS-подобного селектора. С помощью этого метода можно выбрать конкретные узлы, рёбра или другие компоненты, которые удовлетворяют заданным условиям.

const node = vex.select("#node1");

Этот метод позволяет выбрать элемент по его идентификатору (#node1), но возможны и более сложные селекторы, такие как выбор по типу элемента или его атрибутам.

2. selectAll(selector)

Метод selectAll используется для выбора всех элементов, которые соответствуют заданному селектору. В отличие от метода select, который возвращает только первый найденный элемент, selectAll возвращает все совпадения в виде массива объектов.

const nodes = vex.selectAll(".node");

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

3. selectById(id)

Метод selectById позволяет выбрать элемент по его уникальному идентификатору. Это удобный способ найти конкретный элемент в графе, если его идентификатор известен.

const node = vex.selectById("node1");

4. selectByType(type)

Метод selectByType позволяет выбрать элементы определённого типа. Это полезно для работы с узлами или рёбрами, когда нужно изменить их стиль или свойства на основе их типа.

const edges = vex.selectByType("edge");

Типы элементов могут быть различными, например, “node”, “edge”, “label” и другие, в зависимости от структуры вашего графа.

5. selectByData(data)

Метод selectByData используется для выбора элементов на основе их связанных данных. Это может быть полезно, когда нужно манипулировать элементами, имеющими определённые атрибуты или связанные с ними данные.

const nodes = vex.selectByData({ category: "A" });

В данном случае будут выбраны все узлы, которые имеют связанное поле category, равное “A”.

Методы для работы с узлами и рёбрами

1. selectNode(id)

Метод selectNode позволяет выбрать узел по его идентификатору. Это базовый метод для работы с отдельными узлами графа.

const node = vex.selectNode("node1");

2. selectEdge(id)

Метод selectEdge работает аналогично selectNode, но используется для выбора рёбер графа.

const edge = vex.selectEdge("edge1");

3. selectNodes()

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

const nodes = vex.selectNodes();

4. selectEdges()

Аналогично методу selectNodes, метод selectEdges выбирает все рёбра в графе.

const edges = vex.selectEdges();

Методы для работы с атрибутами

1. attr(name)

Метод attr используется для получения значения атрибута выбранного элемента. Этот метод позволяет узнать, какой атрибут установлен у элемента.

const nodeColor = vex.select("#node1").attr("color");

2. attr(name, value)

Если указать оба аргумента, метод attr позволяет установить значение атрибута для выбранного элемента. Это полезно для изменения свойств узлов или рёбер в графе.

vex.select("#node1").attr("color", "red");

3. style(property)

Метод style используется для получения или установки стиля CSS для выбранного элемента. Он работает аналогично методу attr, но для стилей.

const nodeStyle = vex.select("#node1").style("background-color");

Для изменения стиля необходимо указать и свойство, и новое значение.

vex.select("#node1").style("background-color", "blue");

Методы для работы с позициями

1. position()

Метод position возвращает текущие координаты выбранного элемента. Эти данные включают в себя положение элемента на графе, что важно для манипуляций с расположением узлов и рёбер.

const nodePosition = vex.select("#node1").position();

Метод возвращает объект с координатами, например: { x: 150, y: 200 }.

2. position(x, y)

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

vex.select("#node1").position(200, 300);

Методы для работы с событиями

1. on(event, callback)

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

vex.select("#node1").on("click", function() {
    console.log("Node clicked!");
});

2. off(event, callback)

Метод off используется для удаления обработчика события с выбранного элемента. Это важно, если нужно отменить ранее привязанный обработчик.

vex.select("#node1").off("click", callback);

Методы для работы с группами элементов

1. selectGroup(groupName)

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

const groupNodes = vex.selectGroup("group1");

2. selectAllInGroup(groupName)

Метод selectAllInGroup аналогичен методу selectGroup, но он возвращает все элементы внутри группы, включая вложенные.

const allGroupElements = vex.selectAllInGroup("group1");

Методы для удаления и очистки

1. remove()

Метод remove позволяет удалить выбранный элемент из графа. Это может быть полезно, например, для удаления узлов или рёбер, которые больше не нужны.

vex.select("#node1").remove();

2. clear()

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

vex.clear();

Заключение

Методы селекции Vex предоставляют мощные инструменты для взаимодействия с элементами графа, будь то узлы, рёбра или другие компоненты. С помощью этих методов можно гибко управлять атрибутами, стилями, позициями, событиями и группами элементов.