Cytoscape Dagre shows connected Children when there are multiple children

Question

I am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. All children are connected to parent 1 but whenever I use draw a graph using dagre extension, it seems like children are connected between each other. They do not have any edges between them but Dagre still shows that. Is Cytoscape with Dagre capable of showing hierarchical graphs with multiple children?

Here is the stackblitz example: https://stackblitz.com/edit/dagre-childrenconnected

Answer 1

Your edges overlap with your child nodes, that is not a dagre specific problem, your cytoscape-stylesheet is just missing some parameters. With taxi edges, the important thing to understand is, that your edges follow style rules like the layout algorithm you use. For layouts, you use the layout option to specify how the layout should place the nodes. The edges are styled via the stylesheet and they all have some options to play around with.

In your case, you should take a look at this section in the docs. There you can find options like the taxi-direction :

"taxi-direction": "rightward", 

With this option, your edges will fit your layout a bit more. In your case, you didn't specify a direction, so taxi edges use the auto option as a default value, which automatically uses vertical or horizontal starting directions, based on whether the vertical or horizontal distance is largest. In your case, the vertical ones triggered resulting in overlapping nodes.