Circular Layout
The circular layout algorithm is designed to arrange nodes in a circular fashion, providing a clear visual representation of relationships within the graph.
The circular layout algorithm provides extensive customization options through a wide array of properties accessible
via the CircularLayoutOptions. Fundamental options include various layout styles including separate graph partitions,
several edge routing styles for internal and external edges, and others.
It also automatically places node and edge labels when the corresponding properties are activated. Node labels can also be
placed in a ray-like manner.
Additional customization for individual graph elements, such as nodeTypes, nodeMargins, and more, can be achieved via
the CircularLayoutDataProvider.
Feel free to play around with the circular layout configuration in our online playground.
Extensive documentation detailing all available properties of the circular layout supported by yFiles layouts for React Flow can be found here.
runLayout({
name: 'CircularLayout',
layoutOptions: {
nodeLabelPlacement: 'ray-like-leaves',
},
layoutData: {
nodeMargins: () => 10
}
})CircularLayoutOptions
The configuration options for the circular layout algorithm that arranges graphs in a circular fashion.
For more information on the layout algorithm and its available settings, see CircularLayout.
| Name | Type |
|---|---|
edgeDescriptor? | CircularLayoutEdgeDescriptor |
edgeRoutingPolicy? | “interior” | “automatic” | “exterior” |
exteriorEdgeDescriptor? | CircularLayoutExteriorEdgeDescriptor |
fromSketchMode? | boolean |
maximumDeviationAngle? | number |
nodeLabelPlacement? | “consider” | “generic” | “ignore” | “ray-like” | “ray-like-leaves” | “horizontal” |
nodeLabelSpacing? | number |
partitionDescriptor? | PartitionDescriptor |
partitioningPolicy? | “bcc-compact” | “bcc-isolated” | “single-cycle” |
placeChildrenOnCommonRadius? | boolean |
starSubstructureSize? | number |
starSubstructureStyle? | “none” | “radial” | “separated-radial” |
starSubstructureTypeSeparation? | boolean |
CircularLayoutDataProvider<TNodeData, TEdgeData>
A provider for individual options per nodes or edges in a CircularLayout. It allows for defining a function that provide values for each element.
For more information, see CircularLayoutData.
| Name | Description | Type |
|---|---|---|
edgeDirectedness? | Provides 0, 1, or -1 for each edge to indicate if it is undirected, in layout direction, or against layout direction. | (edge: TEdgeData) => number |
groupNodePadding? | Provides the paddings for the group nodes, i.e., a rectangular area like padding in the interior of the node. | (node: TNodeData) => |
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 |
Playground