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.

Radial tree layout

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.

NameType
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.

NameDescriptionType
childOrder?
Provides an order for the given edges in which the edges are arranged at a node.
ChildOrderDataProviderlt;TNodeData,TEdgeData>
edgeLabelPreferredPlacements?
Provides descriptors for the placement of edge labels.
(label: LabelData) => EdgeLabelPreferredPlacement
groupNodePadding?
Provides the paddings for the group nodes, i.e., a rectangular area like padding in the interior of the node.
(node: TNodeData) => Insets
nodeMargins?
Provides margins for nodes, i.e., a rectangular area around a specific node considered during the layout.
(node: TNodeData) => NodeMargins
nodeTypes?
Provides types which can influence the ordering of nodes during layout.
(node: TNodeData) => any

Playground