Tips and tricks

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