Dojo Diagrammer: link layouts for nested graphs decrypted
As mentioned in previous blog posts (for instance Displaying attractive diagrams: quick hints for choosing a graph layout algorithm from Dojo Diagrammer), Dojo Diagrammer provides a comprehensive set of layout algorithms for laying out nodes and links in graphs. In the present post I will provide more in-depth information that may help for configuring the link layout in a tricky case of graphs: nested graphs. Nested graphs are graphs where nodes contain another graph, as opposed to flat graphs which do not contain other graphs. An example of nested graph:
In Dojo Diagrammer, there are several ways to get the links laid out. Link layouts can be performed by:
these algorithms can be applied to flat or nested graphs. The case of
nested graph is the trickiest, mostly because of two reasons:
To deal with intergraph links, the node layouts such as TreeLayout, CircularLayout, and ForceDirectedLayout need to be combined with a link layout (ShortLinkLayout or LongLinkLayout) configured such that it only lays out the intergraph links, while the regular links are laid out by the node layout:
Remains the happy case of HierarchicalLayout. This node layout is the only one that is able to handle intergraph links by itself, and to optimize the layout for the entire nested graph. That is, for laying out nested graphs using Hierarchical, the configuration is much simpler: you only need to set the Hierarchical as node layout. No link layout is needed.
feature of HierarchicalLayout is enabled by default. It can be disabled
(but in this case do not forget to combine it with a link layout for
intergraph links in nested graphs):
The picture below shows a nested graph laid out with this feature of HierarchicalLayout disabled, plus LongLinkLayout configured for the intergraph links:
For comparison, here is the same graph laid out using only HierarchicalLayout with the recursive mode enabled (which is the default mode):
Besides the simplification of the layout configuration (no need to combine the node layout with a link layout), the recursive mode of HierarchicalLayout provides a better quality. As you can see by comparing the two screenshots above, the number of link crossings is smaller, and the links are laid out in a more uniform manner, pointing from left to right (the direction of the hierarchical flow). This is the benefit of the global optimization of the layout for the entire nested graphs.