How to deal with multiple trees situation when using dagre layout in Cytoscape.js

Question

I'm new to Cytoscape.js and trying to draw a graph with the help of Dagre layout depending on users' search input. Number of nodes is typically 50-100.

Although Dagre works well for a single tree, when the graph contains several trees (and sometimes includes independent nodes), the roots of these trees are automatically arranged horizontally(as the picture shown), which makes the nodes and labels become very small. If we can take advantage the horizontal space, the graph will be surely clearer.

My question is that how we can deal with multiple-tree situation, to vertically arrange the trees (for example, 4 roots in a line and the others can be arranged under these trees) to fully utilize the layout space.

Answer 1

Take a look at the rankDir option for orientation of the layout : http://js.cytoscape.org/#layouts/dagre

For even more control, try running one layout per subgraph/tree: http://js.cytoscape.org/#collection/layout

You can control the subgraph position using the boundingBox for each subgraph.

Also see the Dagre docs for details on the config options : https://github.com/cpettitt/dagre/wiki