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.
|
Bus layout |
Class name: ilog.views.graphlayout.bus.IlvBusLayout Example: BL - CSS Sample 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 |
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... } |
