Defines the behavior of the automatic layouts
connect the node’s without overlapping in automatic layout
Defaults to ‘Nonlinear’
Aligns the layout within the given bounds
Defaults to undefined
Sets how to define the connection direction (first segment direction & last segment direction).
Defaults to ‘Auto’
connect the node’s without overlapping in automatic layout
Defaults to ‘SamePoint’
Sets whether the segments have to be customized based on the layout or not
Defaults to ‘Default’
boolean
Enables/Disables animation option when a node is expanded/collapsed
<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ content: 'Default Shape' }]
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: {
type: 'Basic', shape: 'Ellipse'
},
annotations: [{ content: 'Path Element' }]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes,
...
layout: {
enableAnimation: true, orientation: 'TopToBottom',
type: 'OrganizationalChart', margin: { top: 20 },
horizontalSpacing: 30, verticalSpacing: 30,
},
...
});
diagram.appendTo('#diagram');
Defaults to true
boolean
Enable / Disable connector routing for the layout
Defaults to false
string
Sets the name of the node with respect to which all other nodes will be translated
Defaults to ”
Defines the flow chart settings of the layout
Defaults to {}
Function
| string
Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node
Defaults to undefined
Function
| string
getLayoutInfo is used to configure every subtree of the organizational chart
<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ content: 'Default Shape' }]
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: {
type: 'Basic', shape: 'Ellipse'
},
annotations: [{ content: 'Path Element' }]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
}];
let diagram: Diagram = new Diagram({
...
connectors: connectors, nodes: nodes,
layout: {
enableAnimation: true,
type: 'OrganizationalChart', margin: { top: 20 },
getLayoutInfo: (node: Node, tree: TreeInfo) => {
if (!tree.hasSubTree) {
tree.orientation = 'Vertical';
tree.type = 'Alternate';
}
}
},
...
});
diagram.appendTo('#diagram');
Defaults to undefined
Defines how the layout has to be horizontally aligned
Defaults to ‘Auto’
number
Sets the space that has to be horizontally left between the nodes
Defaults to 30
getLayoutInfo is used to configure every subtree of the organizational chart
Defaults to { left: 50, top: 50, right: 0, bottom: 0 }
number
Sets the Maximum no of iteration of the symmetrical layout
Defaults to 30
Defines the orientation of layout
Defaults to ‘TopToBottom’
string
Defines the root of the hierarchical tree layout
Defaults to ”
number
Defines the Edge attraction and vertex repulsion forces, i.e., the more sibling nodes repel each other
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500, margin: { left: 20, top: 20 } },
...
});
diagram.appendTo('#diagram');
Defaults to 40
number
Sets how long edges should be, ideally of the symmetrical layout
Defaults to 50
Defines the type of the layout
Defaults to ‘None’
Defines how the layout has to be vertically aligned
Defaults to ‘Auto’
number
Sets the space that has to be Vertically left between the nodes
Defaults to 30