Organic Layout
The organic layout algorithm is designed to arrange nodes in an organic fashion that effectively highlight the underlying structure of complex graphs.
The organic layout algorithm provides extensive customization options through a wide array of properties accessible
via the OrganicLayoutOptions. Fundamental options include preferred edge lengths, substructure detection, minimum node distances, and more.
It also automatically places node and edge labels when the corresponding properties are activated.
Additional customization for individual graph elements, such as edgeLabelPreferredPlacements, nodeMargins, and more, can be achieved via
the OrganicLayoutDataProvider.
Feel free to play around with the orthogonal layout configuration in our online playground.
Extensive documentation detailing all available properties of the organic layout supported by yFiles layouts for React Flow can be found here.
runLayout({
name: 'OrganicLayout',
layoutOptions: {
edgeLabelPlacement: 'integrated',
deterministic: true,
defaultMinimumNodeDistance: 100
},
layoutData: {
edgeLabelPreferredPlacements: () => ({
edgeSide: 'left-of-edge',
distanceToEdge: 20,
})
}
})OrganicLayoutOptions
The configuration options for the organic layout algorithm that arranges graphs in an organic fashion.
For more information on the layout algorithm and its available settings, see OrganicLayout.
| Name | Type |
|---|---|
allowClusterAsGroupSubstructure? | boolean |
allowNodeOverlaps? | boolean |
automaticGroupNodeCompaction? | boolean |
avoidNodeEdgeOverlap? | boolean |
chainRecognition? | boolean |
chainSubstructureSize? | number |
chainSubstructureStyle? | “none” | “rectangular” | “rectangular-nested” | “straight-line” | “straight-line-nested” | “disk” | “disk-nested” |
circleRecognition? | boolean |
clusteringPolicy? | “none” | “louvain-modularity” | “edge-betweenness” | “label-propagation” | “user-defined” |
compactnessFactor? | number |
cycleSubstructureSize? | number |
cycleSubstructureStyle? | “none” | “circular” | “circular-nested” |
defaultMinimumNodeDistance? | number |
defaultPreferredEdgeLength? | number |
deterministic? | boolean |
edgeLabelPlacement? | “generic” | “ignore” | “integrated” |
groupNodeCompactness? | number |
groupSubstructureScope? | “no-groups” | “groups-without-edges” | “groups-without-inter-edges” | “all-groups” |
groupSubstructureSize? | number |
groupSubstructureStyle? | “circle” | “compact-disk” | “disk” | “organic-disk” |
layoutOrientation? | “top-to-bottom” | “left-to-right” | “right-to-left” | “bottom-to-top” |
nodeLabelPlacement? | “consider” | “generic” | “ignore” |
parallelSubstructureSize? | number |
parallelSubstructureStyle? | “none” | “rectangular” | “radial” | “straight-line” |
parallelSubstructureTypeSeparation? | boolean |
preferredMinimumNodeToEdgeDistance? | number |
qualityTimeRatio? | number |
starSubstructureSize? | number |
starSubstructureStyle? | “none” | “radial” | “radial-nested” | “separated-radial” | “circular” | “circular-nested” |
starSubstructureTypeSeparation? | boolean |
stopDuration? | number |
treeSubstructureSize? | number |
treeSubstructureStyle? | “none” | “oriented” | “radial” | “radial-tree” |
OrganicLayoutDataProvider<TNodeData, TEdgeData>
A provider for individual options per nodes or edges in a OrganicLayout. It allows for defining a function that provide values for each element.
For more information, see OrganicLayoutData.
| Name | Description | Type |
|---|---|---|
edgeLabelPreferredPlacements? | Provides descriptors for the placement of edge labels. | (label: |
groupNodePadding? | Provides the paddings for the group nodes, i.e., a rectangular area like padding in the interior of the node. | (node: TNodeData) => |
minimumEdgeLengths? | Provides the minimal length that an edge should have. | (edge: TEdgeData) => number |
minimumNodeDistances? | Provides the minimal distance from a node to all other nodes. | (node: TNodeData) => number |
nodeMargins? | Provides margins for nodes, i.e., a rectangular area around a specific node considered during the layout. | (node: TNodeData) => |
nodeTypes? | Provides types which can influence the ordering of nodes during layout. | (node: TNodeData) => any |
preferredEdgeLengths? | Provides the preferred length for an edge. It is not mandatory but works as a guidance length. | (edge: TEdgeData) => number |
scope? | Provides which nodes should be placed. | |
Playground