Interface for a class Layout
connect the node’s without overlapping in automatic layout
Aligns the layout within the given bounds
Sets how to define the connection direction (first segment direction & last segment direction).
connect the node’s without overlapping in automatic layout
Sets whether the segments have to be customized based on the layout or not
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');
boolean
Enable / Disable connector routing for the layout
string
Sets the name of the node with respect to which all other nodes will be translated
Defines the flow chart settings of the layout
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
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');
Defines how the layout has to be horizontally aligned
number
Sets the space that has to be horizontally left between the nodes
getLayoutInfo is used to configure every subtree of the organizational chart
number
Sets the Maximum no of iteration of the symmetrical layout
Defines the orientation of layout
string
Defines the root of the hierarchical tree layout
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');
number
Sets how long edges should be, ideally of the symmetrical layout
Defines the type of the layout
Defines how the layout has to be vertically aligned
number
Sets the space that has to be Vertically left between the nodes