Customizing Node and Link Layouts

Styling > Using Cascading Style Sheets > Customizing Node and Link Layouts

Customizing Node and Link Layouts

INDEX

PREVIOUS NEXT

This use case shows how to customize the layout of nodes and links in a network.

Refer to Layout in the Graphic Components documentation for details about the layout.

The customization of the layout is based on the following properties.

Table 2.15 CSS Properties for Node and Link Layout

Property Name	Type	Default Value	Description
`linkPorts`	`IltLinkPort[]`	`Top`, `Bottom`, `Left`, `Right` and `Center`	Applies only to nodes. This property denotes which link ports are recognized by the node when links are attached to it. This property affects the link layout when set to `IltLinkLayout` or `IltShortLinkLayout`. Possible values are: `Top`, `Bottom`, `Left`, `Right` or `Center`. It is possible to create new link ports by creating new instances of `IltLinkPort`.
`fromPort`	`IltLinkPort`	`null`	Applies only to links. Denotes the preferred link port at the "from" end side. Only effective when an `IltShortLinkLayout` is used.
`toPort`	`IltLinkPort`	`null`	Applies only to links. Denotes the preferred link port at the "to" end side. Only effective when an `IltShortLinkLayout` is used.

How to Customize the Layout for Nodes and Links

The following CSS extract illustrates how to customize the link layout using link ports. This example features two network elements identified as NE1 and NE2. Each network element has a set of link ports defined to connect the links that are attached to the node. In addition, there is a link connecting NE1 to NE2. For this link, the example specifies the link ports where the link should be attached by the link layout.

#NE1 {
  linkPorts[0]: "Center";
}
 
#NE2 {
  linkPorts[0]: Left;
  linkPorts[1]: Top;
  linkPorts[2]: Bottom;
}
 
#Link1 {
  fromPort: Center;
  toPort: Left;
}

Please note that link ports are only available when the network or equipment components are configured to use the IltShortLinkLayout. Refer to The LinkLayout Rule in the Graphic Components documentation.

You can set parameters for a particular node or link in a graph layout. This typically applies to certain types of layout, like IlvBusLayout (to set the bus object) or the IlvTreeLayout (to specify the root object), but also to specify that certain nodes or links must remain fixed. Please refer to The GraphLayout Rule in the Graphic Components documentation for more information.

PREVIOUS NEXT