skip to main content
Diagrammer > Programmer's documentation > Using graph layout algorithms > Layout algorithms > CSS: overview of layout algorithms
 
CSS: overview of layout algorithms
In a diagram component, the graph layout algorithm is usually specified by CSS.
The layout algorithms fall into two categories: node layout and link layout. There is also a label layout facility, which technically is not a graph layout algorithm. Label layout is described in section Automatic label placement.
Node layout algorithms
The node layout algorithms are presented in the following table.
Node layout algorithms
Bus layout
Class name: ilog.views.graphlayout.bus.IlvBusLayout
Short description: A layout algorithm designed to display bus network topologies (that is, a set of nodes connected to a bus node)
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘Bus’;
}
Circular layout
Class name: ilog.views.graphlayout.circular.IlvCircularLayout
Example: CL samples
Short description: A layout algorithm that displays graphs representing interconnected ring and/or star network topologies
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘Circular’;
}
Grid layout
Class name: ilog.views.graphlayout.grid.IlvGridLayout
Example GL Sample In CSS
Short description: A layout algorithm that arranges the disconnected nodes of a graph in rows, in columns, or in the cells of a grid
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘Grid’;
}
Hierarchical layout
Class name: ilog.views.graphlayout.hierarchical.IlvHierarchicalLayout
Example: HL samples
Short description: A layout algorithm that arranges nodes in horizontal or vertical levels such that the links flow in a uniform direction
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘Hierarchical’;
}
Topological Mesh layout
Class name: ilog.views.graphlayout.topologicalmesh.IlvTopologicalMeshLayout
Example: TML samples
Short description: A layout algorithm that arranges cyclic (2-connected) undirected graphs in a regular fashion
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘TopologicalMesh’;
}
Tree layout
Class name: ilog.views.graphlayout.tree.IlvTreeLayout
Example: TL samples
Short description: A layout algorithm that arranges the nodes of a tree horizontally or vertically, starting from the root of the tree. The radial layout mode allows you to arrange the nodes of a tree in concentric circles around the root of the tree.
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘Tree’;
}
Uniform Length Edges layout
Class name: ilog.views.graphlayout.uniformlenghtedges.IlvUniformLengthEdgesLayout
Example: ULEL samples
Short description: A layout algorithm that can be used to lay out any type of graph and allows you to specify the length of the links. It applies a force-directed physical simulation that moves the nodes until all links have approximately the same length.
CSS specification:
SDM {
   GraphLayout: “true”;
}
GraphLayout {
   graphLayout: ‘UniformLengthEdges’;
}
Besides these layout algorithms, there are many other layout facilities such as Random Layout, Multiple Layout, and Recursive Layout. The Random Layout is only a testing facility and plays no role in real applications. The Multiple Layout and the Recursive Layout cannot be specified in CSS, but they are used internally in the implementation of the graph layout Renderer.
Link layout algorithm
The link layout algorithm is presented in the following table.
Link Layout Algorithm
Link layout
Class name: ilog.views.graphlayout.link.IlvLinkLayout
Example: LL samples
Short description: A layout algorithm that reshapes the links of a graph without moving the nodes. Several link modes are available, most importantly the orthogonal link mode. The Link Layout is not controlled by the graph layout renderer, but by the specialized link layout renderer.
CSS specification:
SDM {
LinkLayout: “true”;
}
LinkLayout {
... further options...
}
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.