Линии

Обзор

Внешний вид линий, соединяющих фигуры, определяется режимом, в котором инициализирована диаграмма: по умолчанию, организационная диаграмма, ментальная карта или PERT.

Линии в режиме по умолчанию

В режиме по умолчанию Diagram различные фигуры можно соединять "прямыми" (по умолчанию) или "ломаными" линиями в нужной последовательности, чтобы составить схему определённого процесса.

Чтобы добавить текст к линии в режиме по умолчанию Diagram/Diagram Editor, используйте свойство text объекта lineTitle.

Линии в режиме организационной диаграммы

Режим организационной диаграммы Diagram представляет собой организационную диаграмму, содержащую набор фигур, соединённых линиями "elbow" в иерархическом порядке.

Вы можете задать вертикальное направление соединения фигур для родительской фигуры через атрибут конфигурации dir: "vertical" объекта фигуры.

Линии в режиме ментальной карты

Режим ментальной карты Diagram используется для отображения ещё одного вида иерархической диаграммы. Фигуры соединяются линиями "curved" и располагаются вокруг центральной фигуры.

Этот режим полезен, когда нужно представить основную тему или идею, окружённую ветвями подтем.

Расположение дочерних фигур относительно корневой фигуры определяется автоматически основным алгоритмом. Чтобы изменить направление дочерних фигур по умолчанию, используйте свойство конфигурации typeConfig при инициализации диаграммы.

Связи в режиме PERT

Режим PERT диаграммы Diagram предназначен для отображения последовательностей задач и проектов, а также связей между ними. Фигуры типов "task", "milestone" и "project" соединяются соединителями "links".

Настройка соединений между фигурами

Чтобы соединить фигуры в Diagram, можно использовать один из следующих двух способов:

• с помощью объектов линий

Вам нужно указать отдельные объекты, которые будут описывать логику соединения фигур. Например:

const data = [
    // фигуры
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager" },
    { id: "3", text: "Technical Director" },
    { id: "4", text: "Manager" },
    { id: "5", text: "Technical Director" },
    // соединители
    { "id": "1-2", "from": "1", "to": "2", "type": "dash" },
    { "id": "1-3", "from": "1", "to": "3", "type": "dash" },
    { "id": "1-4", "from": "1", "to": "4", "type": "line" },
    { "id": "1-5", "from": "1", "to": "5", "type": "line" }
];

Свойство type в объекте линии позволяет задать индивидуальный тип для каждой линии.

Примечание

См. полный список свойств конфигурации объекта линии.

• с помощью атрибута "parent"

Примечание

Этот способ не работает в режиме по умолчанию Diagram/Diagram Editor.

Вы можете указать свойство parent в объекте конфигурации фигуры и задать в качестве значения id её родительской фигуры:

const data = [
    // фигуры
    { id: "1", text: "Chairman & CEO" },
    { id: "2", text: "Manager", parent: "1" },
    { id: "3", text: "Technical Director", parent: "1" },
    { id: "4", text: "Manager", parent: "1" },
    { id: "5", text: "Technical Director", parent: "1" }
];

В этом случае все соединители будут иметь одинаковый тип.

Установка типа линии по умолчанию

Вы можете задать общий тип для всех соединительных линий диаграммы через параметр lineType свойства lineConfig объекта конфигурации диаграммы:

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        lineType: "dash" // "dash" | "line"
    }
});
diagram.data.parse(data);

Значение параметра lineType применяется, если объект линии не содержит свойства type.

Установка типа соединения линии

Вы можете указать тип соединения для линий диаграммы через параметр connectType свойства lineConfig объекта конфигурации диаграммы. Он предоставляет следующие типы:

• "elbow" (тип по умолчанию для режимов Diagram по умолчанию и организационной диаграммы)
• "straight"
• "curved" (тип по умолчанию для режима ментальной карты Diagram). Обратите внимание, что тип соединительной линии "curved" используется только в режиме ментальной карты Diagram

const diagram = new dhx.Diagram("diagram_container", {
    type: "default",
    lineConfig: {
        connectType: "straight" // "elbow" | "straight" для режима по умолчанию
    }
});
diagram.data.parse(data);

Значение параметра connectType применяется, если объект линии не содержит свойства connectType.