The autoPlace() method works only in the default mode of the diagram and only for shapes
Automatically arranges connected diagram shapes in the hierarchical structure
autoPlace(config?: object): void;
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
placeMode- (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
const diagram = new dhx.Diagram("diagram_container");
Modes of connecting shapes
Connector lines with no arrows are aligned "from center to center"; they are straight and diagonal.
Connector lines are aligned "from side to side".
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)
Modes of placement of shapes
Shapes are arranged along vertical and horizontal lines
- "orthogonal" arrangement with lines in the "direct" mode
- "orthogonal" arrangement with lines in the "edges" mode
Shapes are arranged on imaginary circles relative to the central shape, i.e. a shape with the most connections
- "radial" arrangement with lines in the "direct" mode
- "radial" arrangement with lines in the "edges" mode
- The placeMode parameter is added in v5.0
- The autoplacement property is added in v3.0
Related articles: Arranging shapes automatically
Related sample: Diagram. Default mode. Autoplacement