Adding an invisible root to the layout
If the graph contains several trees that are disconnected from
each other, the layout places them individually next to each
other. Each connected component has its own radial structure with
circular layers. However, sometimes it is appropriate to fit all
connected components into a single circular layer structure.
Conceptually, it is done by adding an invisible root at the
center and connecting all disconnected trees to this root. Figure
Layout of connected components without and
with an invisible root shows the effect of using an invisible
root. It works only if the generic mechanism to lay out connected
components is disabled.
To add an invisible root to the layout:
In CSS
In CSS, specify:
layoutOfConnectedComponentsEnabled: "false"; invisibleRootUsed: "true";
In Java
Call the method:
layout.setLayoutOfConnectedComponentsEnabled(false); layout.setInvisibleRootUsed(true);
![Picture
of tree layouts illustrating the generic handling of disconnected
graphs in contrast to the handling that uses an invisible root](../../../GraphLayout/_media/Fig4-48online51_default.gif)
Layout of connected components without
and with an invisible root
Even spacing for the first circle
Radial mode is designed to optimize the
space such that the circles have a small radius and the overall
space for the entire layout is small. To achieve this result, the
layout algorithm can create larger gaps on the inner circles for
better space usage of the outer circles. It can produce unevenly
spaced circles, most notably for the first circle where all nodes
have the same parent node.
To avoid this effect, you can force the
nodes to be evenly spaced on the entire first circle. Depending
on the structure of the graph, it can cause the overall layout to
waste more space on the other circles but it can produce a more
pleasing graph.
To enable even spacing:
In CSS
Specify:
firstCircleEvenlySpacing: "true";
In Java
Call the method:
layout.setFirstCircleEvenlySpacing (true);
![Picture
of tree layouts illustrating the first circle evenly spacing parameter](../../../GraphLayout/_media/Fig4-49online52_default.gif)
Evenly and unevenly spaced first
circle
For experts: forcing all levels to alternating
When the layout mode
ALTERNATING_RADIAL
is used, the layout checks whether the alternating node
arrangement of a level saves space. If it does not save space,
the layout uses the normal radial arrangement. Therefore, for
many sparse graphs, radial and alternating radial mode yield the
same result because the alternating arrangement does not save
space for any level. It is possible to disable the space check,
that is, to perform an alternating arrangement for all levels
even if this results in waste of space.
In CSS
Add to the
GraphLayout
section:
allLevelsAlternating: "true";
In Java
Call:
layout.setAllLevelsAlternating(true);
For experts: multiple circles per alternating level
When the layout mode
ALTERNATING_RADIAL
is used, the layout places nodes of the same level alternately
into two circles instead of one circle. It is possible to
increase the number of circles even more.
In CSS
Add to the
GraphLayout
section:
numberOfAlternatingCircles: "3"
In Java
Call:
layout.setNumberOfAlternatingCircles(3);
In this case, three circles are used. That means, if the flag allLevelsAlternating is
true
, the layout places each level of nodes onto three alternating
circles. If the allLevelsAlternating
flag is
false
, it checks whether each level requires more space to place the
nodes on one circle or on three circles. High values for the
number of alternating circles must not be used, because they slow
down the algorithm and can produce link crossings.
If you set the number of alternating circles to
0
and the allLevelsAlternating flag is
false
, then it has a special meaning. In this case, a heuristic tries
to calculate the best number of circles per level automatically.
As a result, each level might have a different number of circles,
depending on the number of nodes and the sibling relationships
between the nodes.
For experts: setting a maximum child angle
If a node has many child nodes, they can
extend over a major portion of the circle and, therefore, are
placed nearly 360 degrees around the node. It can result in links
overlapping some nodes. The deficiency can be fixed by increasing
the offset between parent and child nodes. However, it affects
the layout globally, which means that nodes without the
deficiency are also affected. To avoid such a global change, you
can limit the maximum angle between the two rays from the parent,
if it is not the root, to its two outermost child nodes. This
action increases the offset between parent and child nodes only
where necessary.
In figure Maximum child angle, you can see in the
layout on the left that many of the links overlap other nodes. In
the layout on the right, you can see how this problem was solved
by setting a maximum child angle between two rays from a parent
to the two outermost child nodes.
![Picture
of tree layouts illustrating the maximum children angle parameter](../../../GraphLayout/_media/Fig4-50online53_default.gif)
Maximum child angle
To set an angle in degrees.
In CSS
Specify:
maxChildrenAngle: "90";
In Java
Use the method:
void setMaxChildrenAngle(int angle);
Recommended values are
30
-
180
. Setting the value to
0
means the angle is unrestricted. The calculation of the angle is
not precise above 180 degrees or if the aspect ratio is not 1.0.