The spacing of the layout is controlled
mainly by three spacing parameters: the distance between a parent
and its child nodes, the minimum distance between siblings, and the
minimum distance between nodes of different branches. For example,
if the flow direction is to the top or bottom, the offset between
parent and child nodes is vertical; the sibling offset and the
branch offset are horizontal.
For tip-over alignment, an additional
spacing parameter is provided: the minimum distance between
branches starting at a node with tip-over alignment. This offset is
always orthogonal to the normal branch offset. If the flow
direction is to the top or bottom, the tip-over branch offset is
vertical.
Spacing parameters
To specify the spacing parameters:
In CSS
Specify in the
GraphLayout
section:
parentChildOffset: "30.0"; siblingOffset: "15.0"; branchOffset: "20.0"; tipOverBranchOffset: "30.0";
In Java
In Java™ , use the methods:
void setParentChildOffset(float offset);
void setSiblingOffset(float offset);
void setBranchOffset(float offset);
void setTipOverBranchOffset(float offset);
Associate nodes that have a
tip-over-associate child alignment use special spacing parameters:
the associate offset is the distance between the associate node and
the center line that starts at the parent node. The parent child
offset is the distance between the parent node and the first
associate node.
Spacing of child alignments
To specify the associate spacing
parameters:
In CSS
Specify in the GraphLayout section:
parentChildAssociateOffset: "20.0"; associateOffset: "25.0";
In Java
Use the methods:
void setParentChildAssociateOffset(float offset); void setAssociateOffset(float offset);
For experts: additional spacing parameters
The spacing parameters normally specify
the minimum offsets between the node borders. Hence, the layout
algorithm places the nodes such that they do not overlap. You can
also specify that the layout must ignore the node sizes.
In CSS
Add to the
GraphLayout
section:
respectNodeSizes: "false";
In Java
In Java, call:
layout.setRespectNodeSizes (false);
In this case, the spacing parameters are
interpreted as the minimum distances between the node centers,
and the node sides are not taken into account during the layout.
However, if the specified offset parameters are now smaller than
the node size, the nodes and links overlap. It often happens with
orthogonal links in particular. It makes sense to use this option
only if all nodes have approximately the same size, all links are
straight, and the spacing parameters are larger than the largest
node.
If the link style is orthogonal, the shape of the links from the
parent to its child nodes looks like a fork (see Different alignments mixed in the same
drawing). The position of the bend points in this shape can be
influenced by the orthogonal fork
percentage, a value
0
-
100
. It is a percentage of the parent-child offset. If the
orthogonal fork percentage is
0
, the link shape forks directly at the parent node. If the
percentage is
100
, the link shape forks at the child node. A good choice is
25
-
75
. This percentage can be set.
In CSS
Add a statement such as:
orthForkPercentage: "66.6";
In Java
Use the method:
void setOrthForkPercentage(float percentage);
If the link style is not orthogonal, links can overlap
neighboring nodes. It happens only in a few cases, for example,
when a link starts at a small node that is neighboring a large
node. This deficiency can be fixed by increasing the branch
offset. However, it influences the layout globally, affecting
nodes without that deficiency. To avoid a global change, you can
change the overlap percentage
instead, which is a value 0 - 100. This value is used by an
internal heuristic of the layout algorithm that considers a node
to be smaller by this percentage. The default percentage is
30
. It results usually in better usage of the space. For small
nodes neighboring large nodes, you are recommended to decrease
the overlap percentage or to set it to
0
. By taking this action, you disable this heuristic and avoid
links overlapping nodes.
To set the overlap percentage: :
In CSS
Add a statement such as:
overlapPercentage: "33.3";
In Java
Use the method:
void setOverlapPercentage(float percentage);
Note
Always set the orthogonal fork percentage
to a value larger than the value of the overlap percentage.
Effect of using the overlap percentage