Skip to main content

autoPlace()

info

The autoPlace() method works only in the default mode of the diagram and only for shapes

Description

Automatically arranges connected diagram shapes in the hierarchical structure

Usage

autoPlace(config?: object): void;

Parameters

  • config - (optional) an object with configuration settings of the autoplacement. If not specified, the default settings will be applied. Here you can specify the following parameters:
    • mode - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
    • graphPadding - (optional) sets the distance between unconnected diagrams, 200 by default

Example

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

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

Modes of connecting shapes

"direct" mode

Connector lines with no arrows are aligned "from center to center"; they are straight and diagonal.

"edges" mode

Connector lines are aligned "from side to side".

info

To add arrows to the lines, specify forwardArrow: "filled" or backArrow: "filled" in the configuration of a line object.

The connector lines in the "edges" mode can be:

  • either straight (if you set connectType: "straight" property of a line object)

  • or 90-degree curved (if you set connectType: "elbow" property of a line object)

Change log: Added in v3.0

Related articles: Arranging shapes automatically

Related sample: Diagram. Default mode. Autoplacement