Radial Tree Layout
The radial tree layout algorithm is designed to arrange directed and undirected tree graphs. Subtrees rooted at a node are placed in a radial fashion around their root node. All direct children of one node can be placed on a common circle around their parent node (depending on the alignment policy). Therefore, subtrees look like stars, especially if subtrees have similar sizes. The edges of the tree are drawn as straight lines.

The radial tree layout algorithm provides extensive customization options through a wide array of properties accessible
via the RadialTreeLayoutOptions
. Fundamental options include minimum node distances, children ordering, compactness, 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 edgeLabelPreferredPlacements
, nodeMargins
, and more, can be achieved via
the RadialTreeLayoutDataProvider
.
Feel free to play around with the radial tree layout configuration in our online playground.
Extensive documentation detailing all available properties of the radial tree layout supported by yFiles layouts for React Flow can be found here.
runLayout({
name: 'RadialTreeLayout',
layoutOptions: {
edgeLabelPlacement: 'integrated',
nodeLabelPlacement: 'ray-like-leaves'
},
layoutData: {
edgeLabelPreferredPlacements: () => ({
sideOfEdge: 'left-of-edge',
distanceToEdge: 20,
})
}
})
RadialTreeLayoutOptions
The configuration options for the radial tree layout algorithm that arranges the subtrees of the tree graph in a radial fashion.
For more information on the layout algorithm and its available settings, see RadialTreeLayout.
Name | Type |
---|---|
allowOverlaps? | boolean |
chainStraighteningMode? | boolean |
childAlignmentPolicy? | “plain” | “same-center” | “compact” | “smart” |
childOrderingPolicy? | “compact” | “symmetric” | “from-sketch” |
compactnessFactor? | number |
edgeLabelPlacement? | “generic” | “ignore” | “integrated” |
edgeLabelSpacing? | number |
minimumEdgeLength? | number |
minimumNodeDistance? | number |
nodeLabelPlacement? | “consider” | “generic” | “horizontal” | “ignore” | “ray-like” | “ray-like-leaves” |
nodeLabelSpacing? | number |
preferredChildSectorAngle? | number |
preferredRootSectorAngle? | number |
rootSelectionPolicy? | “directed-root” | “center-root” | “weighted-center-root” |
RadialTreeLayoutDataProvider<TNodeData, TEdgeData>
A provider for individual options per nodes or edges in a RadialTreeLayout. It allows for defining a function that provide values for each element.
For more information, see RadialTreeLayoutData.
Name | Description | Type |
---|---|---|
childOrder? | Provides an order for the given edges in which the edges are arranged at a node. |
|
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) => |
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