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

autoplacement

Описание​

Необязательный параметр. Объект с настройками автоматического размещения фигур

К сведению

Свойство autoplacement работает только в режиме по умолчанию диаграммы и только для фигур. Оно не работает при использовании групп или дорожек.

Автоматическое размещение будет применено только после применения метода autoPlace().

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

autoplacement?: {
    mode?: "direct" | "edges", // по умолчанию "direct"
    graphPadding?: number, // по умолчанию 200
    placeMode?: "orthogonal" | "radial", // по умолчанию "orthogonal"
    itemPadding?: number, // по умолчанию 20
    levelPadding?: number // по умолчанию 20
};

Параметры​

Объект autoplacement имеет следующие параметры:

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

Конфигурация по умолчанию​

autoplacement: {
    mode: "direct",
    graphPadding: 200,
    placeMode: "orthogonal",
    itemPadding: 20,
    levelPadding: 20
}

Пример​

const diagram = new dhx.Diagram("diagram_container", {
    autoplacement: {
        placeMode: "radial",
        mode: "direct",
        itemPadding: 10,
        levelPadding: 10,
        graphPadding: 100
    }
});

diagram.data.parse(data);

diagram.autoPlace();

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

Режим "direct"​

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

Режим "edges"​

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

К сведению

Чтобы добавить стрелки к линиям, укажите 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

Полезные статьи:

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

Need more help?Contact Support