Alignment parameter

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.
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 alignment TIP_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
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
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.
Graph
with five child nodes arranged in tip-over-east-west alignment.
Graph
with five child nodes arranged in tip-over-both-sides alignment.
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.
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_NEIGHBOR
    The child node is made a neighbor on the east of its parent.
  • IlvTreeLayout.WEST_NEIGHBOR
    The child node is made a neighbor on the west of its parent.
  • IlvTreeLayout.TIP_OVER_ASSOCIATE_EAST
    The 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_WEST
    The 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_SIDES
    The 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.
Child
node alignments: yellow east neighbor, red tip over associate east,
green center.
Child
node alignments: yellow east neighbor, red tip over associate east,
green tip over both sides.
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
Child
node alignments: yellow west neighbor, red tip over associate both
sides, green center.
Child
node alignments: yellow west neighbor, red tip over associate both
sides, green 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