documentationfor yFiles for HTML 2.6

BalloonLayout

A tree layout algorithm that arranges the subtrees of the tree in a balloon-like fashion.

Inheritance Hierarchy
MultiStageLayout
BalloonLayout
Implemented Interfaces

Remarks

Layout Style

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

Sample balloon-drawing of a large tree obtained with default settings

Sample balloon-drawing featuring interleaved child placement and ray-like node labels

Concept

The algorithm executes the following steps:

  1. Select a root node according to the specified root policy.
  2. Determine the placement of subtrees around the root using a bottom-up recursive approach (starting with leaf nodes).
    • For a leaf node: calculate the convex hull of the node.
    • For a non-leaf node: arrange the children rooted at the node. Children are sorted according to a specified ordering policy and a distance to their parent is chosen. This distance will be chosen such that subtrees rooted at the current node fit into the preferred wedge angle. The wedge angle defines how much radial space a subtree occupies around its parent; it is computed using the convex hull of subtrees.

      Finally, the convex hull of the subtree rooted at the current node is updated in order to include all the convex hulls of child nodes. This is possible, because distances and wedges of the child subtrees are now known.

  3. Assign the actual coordinates of nodes, again using a recursive approach (starting with the root node).

Features

The algorithm features integrated edge labeling as well as node labeling. Edge labels and node labels are placed automatically without generating overlaps with other labels or graph elements. There are different ways to place node labels. Edge labeling will take the settings of PreferredPlacementDescriptor into account.

Defining a preferred wedge angle has a great influence on the layout style. Subtrees rooted at a node get a certain amount of radial space to be placed around the parent node, such that a preferred angle close to 360 degrees will generate drawings where subtrees look like balloons, while an angle close to 180 degrees could be chosen to get drawings where subtrees look like semicircles.

Since it is computationally not very complex, BalloonLayout is very well suited for large tree graphs. It performs well even for huge graphs.

Node types are considered such that the type of the nodes is used as a criterion for sorting the child nodes of a local root node, with the effect that nodes of the same type are placed consecutively, if possible. If defined, the comparer is stronger than the node type criterion However, the node types are considered more important than the childOrderingPolicy.

This layout algorithm can only handle graphs with a tree structure. To apply it to a general graph, a TreeReductionStage can be appended. This stage will temporarily remove some edges of the input graph until a tree is obtained. These edges will later be reinserted and routed separately.

Default Values of Properties

allowOverlapsfalseNodes are not allowed to overlap.
chainStraighteningModefalseThere is no guarantee that chains are drawn straight.
compactnessFactor0.5A factor offering good balance between compactness and runtime.
componentLayoutEnabledtrueThe stage that arranges connected graph components is activated.
hideGroupsStageEnabledtrueThe stage responsible for hiding group nodes is activated.
integratedEdgeLabelingfalseEdge labels are not placed by this algorithm.
integratedNodeLabelingfalseNode labels are not placed by this algorithm.
interleavedModeOFFInterleaved placement is disabled.
minimumEdgeLength40
minimumNodeDistance10
nodeLabelingPolicyRAY_LIKE
orientationLayoutEnabledtrueThe orientation is activated.
parallelEdgeRouterEnabledtrueThe stage that routes parallel edges is activated.
preferredChildWedge340
preferredRootWedge360
selfLoopRouterEnabledtrueThe stage that routes self-loops is activated.

Type Details

yfiles module
layout-core
yfiles-umd modules
All layout modules, view-layout-bridge
Legacy UMD name
yfiles.tree.BalloonLayout

See Also

Constructors

Properties

Methods

Fields

Constants