Branch Offset
Balloon layout mode has minimum spacing
only between nodes, and does not distinguish between minimum
offsets of siblings, branches, and parent-child relationships.
The minimum spacing between nodes is controlled by the branch
offset, as in free mode and level mode. The sibling offset and
parent-child offset have no effect in balloon layout mode.
To specify the minimum offset between
nodes:
In CSS
In CSS, specify in the Graph Layout
section:
branchOffset: "20.0";
In Java
In Java™ , use the method:
void setBranchOffset(float offset);
Angle Spacing
The angles between sectors of a balloon,
and the radius of the balloon have more effect on the spacing of
the layout than the minimum offset. A bad choice of sector angles
requires larger radii to avoid overlaps, and hence a larger area
for the layout. Therefore, the layout offers different angle
spacing modes.
In the following figure, the layout on the
left uses regular angle spacing and the layout on the right uses
proportional angle spacing. On the right, the sector angle of the
blue subtree is much larger than the sector angles of each green
subtree, since the blue subtree is larger than the green
subtrees.
Angle spacing: left: regular, right:
proportional (slow)
To specify angle spacing:
In CSS
Add to the Graph Layout section:
balloonAngleSpacing: "REGULAR";
In CSS, there is no
IlvTreeLayout
prefix when you specify the value of angle spacing.
In Java
In Java™ , use the method:
void setBalloonAngleSpacing(int mode);
The valid values for mode are:
- IlvTreeLayout.REGULAR
-
The available angle range at a node is evenly split so that each subtree balloon at the node can occupy the same angle. It looks uniform but tends to waste space if the subtrees are not the same size. See the angle spacing figure, left image.
- IlvTreeLayout.FAST_PROPORTIONAL
-
The available angle range at a node is proportionally split so that larger subtree balloons at the node can occupy larger angles. As a consequence, a larger subtree requires a smaller radius, hence this mode uses less space. The algorithm uses a fast heuristic to calculate the angle ranges. This heuristic is not precise and sometimes produces asymmetric layouts. The quality of the result depends strongly on the choice of start angle. The heuristic runs in linear time.
- IlvTreeLayout.PROPORTIONAL
-
Same as the fast proportional mode: the available angle range at a node is proportionally split so that larger subtree balloons at the node can occupy larger angles. However, the algorithm uses a slow heuristic that is more precise, uses the space even better, and produces symmetric layouts. The quality of the result does not depend on the choice of start angle. The heuristic runs in quadratic time. It is the default mode. See the angle spacing figure, right image.
Radius mode
When the sector angles have been chosen
for the subtree balloons, the radius (length of the link from
parent to child) must be calculated so that no subtrees overlap.
The choice of radius is a trade-off between symmetry and area.
Choosing a uniform radius for all child nodes of the same parent
often requires much space. See the figure showing examples of
uniform and variable radius layouts, upper left image. If the
radius is variable, symmetries are lost. As a compromise, you can
choose to have a variable radius only for large subtree balloons
and keep a uniform radius for all the leaves of a parent. See the
figure showing examples of uniform and variable radius layouts,
upper right image, where the link towards the blue subtree is
longer than the links to the green subtrees. If symmetries are
not important, an additional optimization phase can be selected
that shifts the balloons closer together. The optimization phase
can be applied to subtrees that are not leaves. See the figure
showing examples of uniform and variable radius layouts, lower
left image. This phase can also be used to shift leaves together.
See the figures showing examples of uniform and variable radius
layouts, lower right image. In the latter case, the leaves are
often rather scattered and no longer on a circle.
Radius mode: left: uniform, right:
uniform leaves (larger subtrees have variable radius)
Radius mode: left: optimized uniform
leaves, right: optimized variable
To specify the radius mode:
In CSS
In CSS, add to the Graph Layout
section:
balloonRadiusMode: "UNIFORM_RADIUS";
In CSS, there is no
IlvTreeLayout
prefix when you specify the value of the radius mode.
In Java
In Java™ , use the method:
void setBalloonRadiusMode(int mode);
The valid values for
mode
are:
- IlvTreeLayout.UNIFORM_RADIUS
-
The radii of all subtree balloons that are child nodes of the same node are uniform. This mode requires the largest area but also gives the greatest number of symmetries in the layout. However, if the tree is not balanced, it usually wastes much space. See the variable radius figure, upper left image.
- IlvTreeLayout.UNIFORM_LEAVES_RADIUS
-
The radii of all leaves that are child nodes of the same node are uniform, however the radius of a balloon that contains more than one node can vary. This value is better for unbalanced trees since it uses the available space much better. Use this value if symmetries in the layout are important. See the variable radius figure, upper right image.
- IlvTreeLayout.VARIABLE_RADIUS
-
The radius of all different child balloons at the same parent node can vary. It even varies for child nodes of the same node, if these child nodes have different node sizes.
- IlvTreeLayout.OPTIMIZED_UNIFORM_LEAVES_RADIUS
-
The initial placement is done as in uniform leaves radius mode. Additionally, an optimization heuristic shifts subtrees together to reduce the radii. This has the advantage of smaller space requirements but loses symmetries in the diagram. Leaves that have the same parent node still keep the same radius. See the variable radius figure, lower left image.
- IlvTreeLayout.OPTIMIZED_VARIABLE_RADIUS
-
The initial placement is done as in variable radius mode. Additionally, an optimization heuristic shifts subtrees together to reduce the radii. It has the advantage of smaller space requirements but loses symmetries in the diagram. It affects even leaves of the same parent, hence they can end up rather scattered around the parent. See the variable radius figure, lower right image.