Dagre Layout is an appropriate layout method for directed flow graph. It will calculate the levels and positions of nodes automatically according to the edge directions in the data.

Usage

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.

• Example 1 : Simple Dagre Layout.
• Example 2 : Dagre Layout from left to right.
• Example 3 : Translate the layout parameters in dynamic.

rankdir

Type: String
Options: 'TB' | 'BT' | 'LR' | 'RL'
Default: 'TB'
Required: false
Explanation: The layout direction. T: top; B: bottom; L: left; R: right.

• 'TB': Layout from the top to the bottom;
• 'BT': Layout from the bottom to the top;
• 'LR': Layout from the left to the right;
• 'RL': Layout from the right to the left;

align

Type: String
Options: 'UL' | 'UR' | 'DL' | 'DR'
Default: 'UL'
Required: false
Explanation: Alignment. U: upper; D: down; L: left; R: right

• 'UL': Align to the upper left;
• 'UR': Align to the upper right;
• 'DL': Align to the down left;
• 'DR': Align to the down right;

nodesep

Type: Number
Default: 50
Required: false
Explanation: The node separation(px)

ranksep

Type: Number
Default: 50
Required: false
Explanation: The level separation(px)

controlPoints

Type: Boolean
Default: true
Required: false
Explanation: Whether to keep the control points of edges