Radial Layout

The radial layout algorithm is designed to arrange graphs in a radial fashion. The nodes are distributed into circles (layers) around a common center based on predefined layering strategies. Some potential applications include visualization of social networks, data clustering and bioinformatic.

Radial layout

The radial layout algorithm provides extensive customization options through a wide array of properties accessible via the RadialLayoutOptions. Fundamental options include layer spacing, center node policy, node and edge distances, and others. It also automatically places node 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 RadialLayoutDataProvider.

Feel free to play around with the radial layout configuration in our online playground.

Extensive documentation detailing all available properties of the radial layout supported by yFiles layouts for React Flow can be found here.

runLayout({
  name: 'RadialLayout',
  layoutOptions: {
    centerNodesPolicy: 'directed',
    nodeLabelPlacement: 'ray-like-leaves',
    minimumLayerDistance: 50
  },
  layoutData: {
    nodeMargins: () => 10
  }
})

RadialLayoutOptions

The configuration options for the radial layout algorithm that arranges graphs in a radial fashion.

For more information on the layout algorithm and its available settings, see RadialLayout.

NameType
centerNodesPolicy?
“directed” | “centrality” | “weighted-centrality”
createControlPoints?
boolean
edgeRoutingStyle?
“polyline” | “arc” | “radial-polyline” | “curved”
layeringStrategy?
“bfs” | “hierarchical” | “dendrogram”
layerSpacing?
number
maximumChildSectorAngle?
number
minimumBendAngle?
number
minimumEdgeDistance?
number
minimumLayerDistance?
number
minimumNodeDistance?
number
minimumSectorDistance?
number
nodeLabelPlacement?
“consider” | “generic” | “horizontal” | “ignore” | “ray-like” | “ray-like-leaves”
nodeLabelSpacing?
number

RadialLayoutDataProvider<TNodeData, TEdgeData>

A provider for individual options per nodes or edges in a RadialLayout. It allows for defining a function that provide values for each element.

For more information, see RadialLayoutData.

NameDescriptionType
centerNodes?
Provides which nodes should be placed on the innermost circle.
(node: TNodeData) => boolean
childOrder?
Provides an order for outgoing edges at the given node in which the edges are arranged.
ChildOrderDataProviderlt;TNodeData,TEdgeData>
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