Перейти к основному содержимому

autoPlace()

К сведению

Метод autoPlace() работает только в режиме по умолчанию диаграммы и только для фигур

Описание​

Автоматически упорядочивает связанные фигуры диаграммы в иерархической структуре

Использование​

autoPlace(config?: object): void;

Параметры​

  • config - (необязательный) объект с настройками автоматического размещения. Если не указан, применяются настройки по умолчанию. Здесь можно указать следующие параметры:
    • mode - (необязательный) режим соединения фигур, "direct" (по умолчанию) или "edges"
    • graphPadding - (необязательный) задаёт расстояние между несвязанными диаграммами, по умолчанию 200
    • placeMode - (необязательный) задаёт режим расположения фигур, "orthogonal" (по умолчанию) или "radial"
    • itemPadding - (необязательный) минимальный отступ между элементами (минимальное значение — 1), по умолчанию 20
    • levelPadding - (необязательный) минимальный отступ между уровнями иерархии (минимальное значение — 1), по умолчанию 20

Пример​

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
    mode: "edges",
    placeMode: "radial"
});

Режимы соединения фигур​

Режим "direct"​

Линии-соединители без стрелок выравниваются "от центра к центру"; они прямые и диагональные.

Режим "edges"​

Линии-соединители выравниваются "от стороны к стороне".

Примечание

Если для связи заданы fromSide и toSide, алгоритм автоматического размещения сохранит эти значения, но не будет использовать их при расчёте расположения. Ключевыми свойствами, определяющими связи, являются from и to, а fromSide и toSide вычисляются алгоритмом автоматически.

К сведению

Чтобы добавить стрелки к линиям, укажите forwardArrow: "filled" или backArrow: "filled" в конфигурации объекта линии.

Линии-соединители в режиме "edges" могут быть:

  • или изогнутыми под углом 90 градусов (если задать свойство connectType: "elbow" объекта линии)

Режимы расположения фигур​

Режим "orthogonal"​

Фигуры располагаются вдоль вертикальных и горизонтальных линий

  • расположение "orthogonal" с линиями в режиме "direct"

  • расположение "orthogonal" с линиями в режиме "edges"

Режим "radial"​

Фигуры располагаются по воображаемым окружностям относительно центральной фигуры, то есть фигуры с наибольшим количеством связей

  • расположение "radial" с линиями в режиме "direct"

  • расположение "radial" с линиями в режиме "edges"

Журнал изменений:

  • Параметры itemPadding и levelPadding добавлены в v6.1.3
  • Параметр placeMode добавлен в v5.0
  • Свойство autoplacement добавлено в v3.0

Полезная статья: Автоматическое расположение фигур

Связанные примеры:

Need more help?Contact Support