The alignment option controls how a parent
is placed relative to its child nodes. The alignment can be set
globally, in which case all nodes are aligned in the same way, or
locally on each node, with the result that different alignments
occur in the same drawing.
![Series
of tree layouts showing center alignment, west alignment, border center
alignment, and east alignment.](../../../GraphLayout/_media/tree_alignments_default.png)
Alignment options
Global alignment
To set the global alignment:
In CSS
For example, add to the GraphLayout
section:
globalAlignment: "CENTER";
In Java
Use the method:
void setGlobalAlignment(int alignment);
The valid values for the global alignment
are:
IlvTreeLayout.CENTER
(the default)The parent is centered over its child nodes, taking the center of the child nodes into account.IlvTreeLayout.BORDER_CENTER
The parent is centered over its child nodes, taking the border of the child nodes into account. If the size of the first and the last child varies, the border center alignment places the parent closer to the larger child than to the default center alignment.IlvTreeLayout.EAST
The parent is aligned with the border of its easternmost child. For instance, if the flow direction is to the bottom, east is the direction to the right. If the flow direction is to the top, east is the direction to the left. See Using compass directions for positional layout parameters (TL) for details.IlvTreeLayout.WEST
The parent is aligned with the border of its westernmost child. For instance, if the flow direction is to the bottom, west is the direction to the left. If the flow direction is to the right, west is the direction to the bottom. See Using compass directions for positional layout parameters (TL) for details.IlvTreeLayout.TIP_OVER_EAST
The child nodes are arranged sequentially instead of in parallel and the parent node is placed with an offset to the child nodes. The child nodes are to the east of the parent node. For details, see Tip-over alignment.IlvTreeLayout.TIP_OVER_WEST
The child nodes are arranged sequentially instead of in parallel and the parent node is placed with an offset to the child nodes. The child nodes are to the west of the parent node. For details, see Tip-over alignment.IlvTreeLayout.TIP_OVER_EAST_WEST
The child nodes are arranged sequentially instead of in parallel and the parent node is placed with an offset to the child nodes. The child nodes are arranged on both sides of the parent node. The first child node is placed to the east. Subsequent child nodes are placed to the east or the west, such that the space used on both sides is roughly the same; that is, the sum of the heights of the subtrees to the east is approximately the same as that of the subtrees to the west. For details, see Tip-over alignment.IlvTreeLayout.TIP_OVER_BOTH_SIDES
The child nodes are arranged sequentially instead of in parallel. Whereas the alignmentTIP_OVER_EAST
or TIP_OVER_WEST arranges all child nodes on the same side of the parent, this alignment arranges the child nodes on both sides of the parent. Unlike TIP_OVER_EAST_WEST alignment, this style does not try to optimize the space used on both sides, but always places the odd-numbered child nodes on the west and the even-numbered on the east. Each pair of child nodes, one on the west and one on the east, has its odd and even nodes aligned with each other. For details, see Tip-over alignment.IlvTreeLayout.MIXED
Each parent node can have a different alignment. The alignment of each individual node can be set with the result that different alignments can occur in the same graph.
In CSS, you omit the prefix
IlvTreeLayout
when specifying the value of the alignment.
Alignment of individual nodes
All nodes have the same alignment unless the global alignment is
set to
MIXED
. Only when the global alignment is set to
MIXED
can each node have an individual alignment style.
![A sample
graph with different alignments in each subtree](../../../GraphLayout/_media/tree_align_mixed_default.png)
Different alignments mixed in the same
drawing
To specify the alignment of an
individual node:
In CSS
First set the global alignment to
MIXED, then specify a rule that selects the node; for example:
GraphLayout { globalAlignment: "MIXED"; } #node1 { Alignment: "EAST"; }
In Java
Use the methods:
void setAlignment(Object node, int alignment);
int getAlignment(Object node);
The valid values for
alignment
are:
IlvTreeLayout.CENTER
(the default value)IlvTreeLayout.BORDER_CENTER
IlvTreeLayout.EAST
IlvTreeLayout.WEST
IlvTreeLayout.TIP_OVER_EAST
IlvTreeLayout.TIP_OVER_WEST
IlvTreeLayout.TIP_OVER_EAST_WEST
IlvTreeLayout.TIP_OVER_BOTH_SIDES
Tip-over alignment
Normally, the child nodes of a node are placed in a parallel arrangement with siblings as
direct neighbors of each other. Tip-over alignments mean a sequential arrangement of the child nodes
instead.
![A sample
graph shown first with normal alignment and then with tip-over east
alignment](../../../GraphLayout/_media/tree_align_tipover_normal_east_default.png)
Normal alignment and a tip-over
alignment
Tip-over alignment is useful when the tree
has many leaves. With normal alignment, a tree with many leaves
would result in the layout being wide. If the global alignment
style is set to tip-over, the drawing is tall rather than wide.
To balance the width and height of the drawing, you can set the
global alignment to mixed.
In Java
For example:
layout.setGlobalAlignment(IlvTreeLayout.MIXED);
Also, you can set the individual
alignment to tip-over for some parents with a high number of
child nodes as follows:
layout.setAlignment(parent, IlvTreeLayout.TIP_OVER_EAST);
Tip-over alignments can be specified explicitly for some or all
of the nodes. Tree Layout offers layout modes that automatically
determine when to tip over, giving a drawing that fits into a
specified aspect ratio. These layout modes are described in Tip-over layout modes.
Tip-over-east alignment arranges the nodes
on the east side of the center line that starts at the parent
node. The tip-over-west alignment arranges the nodes on the west
side of that line. There are also two variants that distribute
the subtrees on both sides of that line. You can specify these
variants at a parent node with a high number of child nodes by
the following code:
layout.setAlignment(parent, IlvTreeLayout.TIP_OVER_EAST_WEST);
or:
layout.setAlignment(parent, IlvTreeLayout.TIP_OVER_BOTH_SIDES);
The following figures show the difference
between Tip-over-east-west and tip-over-both-sides alignments.
![]() |
![]() |
Tip-over-east-west alignment | Tip-over-both-sides alignment |
Tip-over alignment works well with the orthogonal link style; see
Link style (TL). The following figure shows
the difference between tip over on one side and tip over on two
sides. Tip-over alignments are specified for the red nodes; the
blue nodes have center alignment.
![Tree
layouts showing tip-over alignment options for east and both sides
at red nodes.](../../../GraphLayout/_media/treetipover_east_both_red_default.png)
Tip-over alignments
Child alignments
Global alignment is valid for all nodes.
The alignment specified at a node is valid for all child nodes of
that node. Additionally, you can specify exceptions for certain
nodes that are aligned differently than all other child nodes.
This is useful for organization chart displays. In an
organization chart that shows a management hierarchy, some of the
people shown do not belong to the hierarchy. Instead, they are
associated with a particular member of the hierarchy. An example
could be a secretary associated with a manager of a company. In
an organization chart tree, the node representing the secretary
is normally displayed close to the node of the manager, but is
not mixed with the child nodes that represent the normal workers
who report to that manager.
To set the child alignment of a specific
node:
In CSS
#node1 { ChildAlignment: "EAST_NEIGHBOR"; }
In Java
Use the methods:
void setChildAlignment(Object node, int alignment);
int getChildAlignment(Object node);
The following values are valid for child
alignment:
- IlvTreeLayout.UNSPECIFIED (the default value).No exceptional alignment is specified for the child node. It is aligned like normal child nodes.
- IlvTreeLayout.EAST_NEIGHBORThe child node is made a neighbor on the east of its parent.
- IlvTreeLayout.WEST_NEIGHBORThe child node is made a neighbor on the west of its parent.
- IlvTreeLayout.TIP_OVER_ASSOCIATE_EASTThe child node layout is like tip-over-east alignment, but the node appears above all normal child nodes. The normal child nodes can have any alignment. If they also have tip-over-east alignment, you can distinguish the associate node by using a different spacing. See Spacing parameters.
- IlvTreeLayout.TIP_OVER_ASSOCIATE_WESTThe child node layout is like tip-over-west alignment, but the node appears above all normal child nodes. The normal child nodes can have any alignment. If they also have tip-over-west alignment, you can distinguish the associate node by using a different spacing. See Spacing parameters.
- IlvTreeLayout.TIP_OVER_ASSOCIATE_BOTH_SIDESThe child node layout is like tip-over-both-sides alignment, that is, alternating on the east and the west, but the node appears above all normal child nodes. The normal child nodes can have any alignment. If they also have tip-over-both-sides alignment, you can distinguish the associate node by using a different spacing. See Spacing parameters.
In CSS, omit the prefix IlvTreeLayout
when you specify the value of the alignment.
In the following figures, the yellow nodes
have child alignments EAST_NEIGHBOR or WEST_NEIGHBOR, and the red
nodes have child alignments TIP_OVER_ASSOCIATE_EAST or
TIP_OVER_ASSOCIATE_BOTH_SIDES. The green nodes have unspecified
child alignments, that is, they are aligned with the global
alignment style.
![]() |
![]() |
Alignments shown are for yellow node: east neighbor, for red nodes: tip over associate east, and for green nodes: center | Alignments shown are for yellow node: east neighbor, for red nodes: tip over associate east, and for green nodes: tip over both sides |
![]() |
![]() |
Alignments shown are for yellow node: west neighbor, for red nodes: tip over associate both sides, and for green nodes: center | Alignments shown are for yellow node: west neighbor, for red nodes: tip over associate both sides, and for green nodes: tip over both sides |