Edges to Subgraphs (Clustering)

[rasifix]

The following code produces an error due to the edge from A -> group.

 var g = new graphlib.Graph({compound:true});
 g.setGraph({});
 g.setNode("A", {label:'A'});
 g.setNode("B", {label:'B'});
 g.setNode("group", {label:''});
 g.setParent("B", "group");
 g.setEdge("A", "group", {label:''});
 g.graph().marginx = 20;
 g.graph().marginy = 20;
 g.graph().transition = function(selection) {
   return selection.transition().duration(500);
 };

 console.log(g.node("group"));
 d3.select("svg g").call(render, g);

in dagre.core.js line 3054. The issue disappears when I remove the edge from A->group. However, that is exactly what I need. The node "group" disappears when rendering the graph. I have tried to find out who is removing the node. At some point the group node disappears from the _nodes list.

Can you provide me with some pointers how to get started tracking down that bug? I know graphviz does not support nodes to clusters directly (it does with a nasty trick that does not work half the time) but I believe that would be a natural and valuable addition.

[amilenovic]

+1. I have the same need as @rasifix .

[pajarito80]

Would be great if this would be possible... I have the same need as well...

[courtneymiller2010]

+1. I would like this functionality as well.

[ghost]

Same same

[jgz-dev-gh]

Same here - it would be great to have this feature.

[Tichau]

+1, I really need this too. It seems to be the rank system that use a simplified graph (made only with nodes, not clusters), so when it tried to add edge on a cluster it doesn't find it.

I can spent some time to fix this, but I need some help to not spent too much ^^. What is rank ?

[geoffwc]

+1 Me too

[harrybabu]

Anyone solved this issue, it will be helpful if you can share the snippet 👍

[ghost]

@cpettitt I can image you are busy and don't have time to work on this, but could you maybe provide a pointer on where the problem could be and how to solve it?

[cpettitt]

Unfortunately it has been too long since I worked with dagre to be of much help. I relied heavily on two papers for subgraphs, which may be of help:

The implementation for clustering derives extensively from Sander, "Layout of Compound Directed Graphs." It is an excellent paper that details the impact of clustering on all phases of layout and also covers many of the associated problems. Crossing reduction with clustered graphs derives from two papers by Michael Forster, "Applying Crossing Reduction Strategies to Layered Compound Graphs" and "A Fast and Simple Heuristic for Constrained Two-Level Crossing Reduction."

It is possible that I just didn't implement node to subgraph. Another possibility is that there is some bug in the way the edges are handled. IIRC, I collapse all nodes in a subgraph during ranking (this figures out what level each node ends up at), so that would be an area to look at. One of the two papers (Sander, I think?) goes into the logic behind collapsing nodes in the rank phase.

[Tichau]

On my side, I have finally used cytoscape.js to handle the display of hierarchical graphs (in case it can help someone).

[ftzdomino]

A workaround is to redirect your edges to the first node in the cluster.

[tylerlong]

@Tichau problem with cytoscape.js is it requires you to specify the position of nodes explicitly, for example: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/compound-nodes/code.js There is no way to layout "magically" like dagre does.

Correct me if I am wrong.

Update: there are layout extensions for cytoscape.js: https://github.com/cytoscape/cytoscape.js-cose-bilkent

[Tichau]

@tylerlong There is a Dagre layout in cytoscape : http://js.cytoscape.org/demos/dagre-layout/ It just need to be configured in the layout settings.

[tylerlong]

@Tichau Thanks for the information. But if we use dagre layout in cytoscape, we will still have this issue because it's a dagre issue instead of a rendering engine issue.

Recently I am investigating elkjs which seems to be as flexible as dagre.