Balloon Layout

The balloon 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 balloons or stars, especially if subtrees have similar sizes. The edges of the tree are drawn as straight lines.

The balloon layout algorithm provides extensive customization options through a wide array of properties accessible via the BalloonLayoutOptions. 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 edgeLabelPreferredPlacement, nodeHalos, and more, can be achieved via the BalloonLayoutDataProvider.

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

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

runLayout({
  name: 'BalloonLayout',
  layoutOptions: {
    integratedEdgeLabeling: true,
    integratedNodeLabeling: true,
    nodeLabelingPolicy: 'ray-like-leaves'
  },
  layoutData: {
    edgeLabelPreferredPlacement: () => ({
      sideOfEdge: 'left-of-edge',
      distanceToEdge: 20,
    })
  }
})

BalloonLayoutOptions

The configuration options for the balloon layout algorithm that arranges the subtrees of the tree graph in a balloon-like fashion.

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

BalloonLayoutDataProvider<TNodeData, TEdgeData>

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

For more information, see BalloonLayoutData.

Playground