Horizontal hierarchical layout (horizontal tree layout) with Webcola

[karlitos]

Hi,

I am struggling with creating horizontal hierarchical layout with Cytoscape.Js and Cola. Cytoscape.Js does not support horizontal breadth first layout natively, I was hoping Cola could be the solution.

I initialize the cola layout with:

flow: { axis: 'x', minSeparation: 10 }

which leads to following layout: I was hoping to get something more like this:

Is it possible to achieve such result and if, how ?

[gordonwoodhull]

It looks like you need a much larger separation - that's in pixels, so 10 pixels is less than the width of a node.

That said, if you want a traditional directed graph layout (like dot in graphviz) you might also try dagre. It's not maintained but it works pretty well in most cases.

[karlitos]

Thank you for your reply, I tried larger separation (e.g. 100px) and it improved the resulting layout.

Basically I would like to get the graph as compact as possible in the vertical direction and get all the direct children nodes at the same vertical position.

I wonder if there is a possibility to define specific constraints as:

• place all children of a node at the same horizontal position
• place the children of a node around the vertical position of the parent

I tried dagre and it looks promising, I need to test, how it behaves in specific scenarios