Создание узлов

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

Структура узла

Узел в Mind.js создается с помощью объекта, содержащего как минимум уникальный идентификатор и заголовок. Основные свойства узла:

  • id: уникальная строка или число, идентифицирующее узел в графе.
  • topic: текстовое содержимое узла, отображаемое на визуальной карте.
  • parent: идентификатор родительского узла, используется при создании иерархии.
  • children: массив дочерних узлов.
  • data: объект для хранения произвольных данных, связанных с узлом.
  • expanded: булевое значение, определяющее, раскрыт ли узел в визуализации.

Пример создания базового узла:

const node = {
    id: "n1",
    topic: "Главная тема",
    parent: null,
    children: [],
    data: { description: "Основной узел графа" },
    expanded: true
};

Методы создания и добавления узлов

Mind.js позволяет динамически добавлять узлы к существующему графу через методы API:

  • addNode(parentId, node) — добавляет новый узел как дочерний к указанному родителю.
  • insertNodeBefore(siblingId, node) — вставляет узел перед указанным соседним узлом.
  • insertNodeAfter(siblingId, node) — вставляет узел после указанного соседнего узла.

Пример добавления дочернего узла:

const childNode = {
    id: "n2",
    topic: "Подтема 1",
    parent: "n1",
    children: [],
    data: { importance: "высокая" },
    expanded: false
};

mind.addNode("n1", childNode);

Настройка визуальных свойств узлов

Каждый узел можно настраивать с точки зрения визуализации:

  • background: цвет фона узла.
  • fontColor: цвет текста.
  • borderWidth: толщина рамки.
  • icon: иконка, отображаемая рядом с текстом узла.
  • shape: форма узла (например, rectangle, ellipse, round-rectangle).

Пример задания визуальных свойств:

const styledNode = {
    id: "n3",
    topic: "Важная тема",
    parent: "n1",
    children: [],
    data: {},
    expanded: true,
    background: "#FFD700",
    fontColor: "#000000",
    borderWidth: 2,
    shape: "ellipse"
};

mind.addNode("n1", styledNode);

Динамическое управление узлами

Mind.js поддерживает динамическое изменение структуры графа после создания узлов:

  • updateNode(nodeId, newProperties) — обновляет свойства существующего узла.
  • removeNode(nodeId) — удаляет узел и все его дочерние элементы.
  • moveNode(nodeId, newParentId) — перемещает узел в другую ветку графа.

Пример обновления текста узла:

mind.updateNode("n2", { topic: "Обновленная подтема" });

Пример удаления узла с дочерними элементами:

mind.removeNode("n2");

Связи между узлами

В дополнение к иерархии, Mind.js позволяет создавать произвольные связи между узлами для построения сложных сетевых структур:

  • addLink(sourceId, targetId, linkData) — создает связь между двумя узлами.
  • updateLink(linkId, newData) — изменяет свойства существующей связи.
  • removeLink(linkId) — удаляет связь.

Свойства связи могут включать цвет, тип линии, толщину и подпись. Пример создания связи:

mind.addLink("n1", "n3", { color: "#FF4500", label: "Связь важности" });

Практические рекомендации

  • Использовать уникальные идентификаторы для всех узлов, чтобы избежать конфликтов.
  • Применять массив data для хранения пользовательских метаданных без нарушения структуры графа.
  • Настраивать визуальные свойства узлов и связей для улучшения восприятия больших карт.
  • Динамическое добавление и удаление узлов позволяет строить интерактивные карты знаний.
  • Разделять логическую структуру данных и визуальные параметры, чтобы облегчить масштабирование графа.

Примеры сложной иерархии

const root = { id: "root", topic: "Корень", parent: null, children: [], data: {}, expanded: true };
const childA = { id: "a", topic: "Ветка A", parent: "root", children: [], data: {}, expanded: true };
const childB = { id: "b", topic: "Ветка B", parent: "root", children: [], data: {}, expanded: false };
const subChildA1 = { id: "a1", topic: "Подветка A1", parent: "a", children: [], data: {}, expanded: false };

mind.addNode(null, root);
mind.addNode("root", childA);
mind.addNode("root", childB);
mind.addNode("a", subChildA1);

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

Оглавление