Unable to draw an edge from a child to parent in compound graph

[thenylify]

Hi all,

I am currently using Dagre for one of my data visualisation project, it is a compound graph which requires a node to contain a nested node, I'm unable to draw edges from child nodes to parent nodes, I get the following error:

Uncaught TypeError: Cannot set property ‘rank’ of undefined.

Please also see the below code:

g.setNode('a', {label: 'A'});
g.setNode('b', {label: 'B'});
g.setNode('c', {label: 'C'});
g.setNode('d', {label: 'D'});

g.setNode('top_group', {label: 'Top Group', clusterLabelPos: 'bottom', style: 'fill: #ffd47f'});
g.setNode('bottom_group', {label: 'Group', clusterLabelPos: 'top', style: 'fill: #d3d7e8'});

// Set the parents to define which nodes belong to which cluster
g.setParent('a', 'top_group');
g.setParent('b', 'bottom_group');
g.setParent('c', 'bottom_group');
g.setParent('d', 'bottom_group');

// Draw edges
g.setEdge('a', 'b');
g.setEdge('b', 'c');
g.setEdge('b', 'd');

// Set edge from child to parent
g.setEdge('a', 'bottom_group'); // THIS LINE CAUSES THE ABOVE ERROR

The way how we create a parent is the same as how we create a child node, so the library should allow us to draw an edge from a child node to a parent node.

Please see the following JSFIDDLE: http://jsfiddle.net/thenylify/Lbjm54ob/8/

Can someone please advice?

This is really urgent so can someone please help.

Much appreciated,
Thanks,
Michael

[thenylify]

PLEASE SEE THE JSFIDDLE: http://jsfiddle.net/thenylify/Lbjm54ob/8/

[hastebrot]

Seems once you promoted a node to a group node you can't define an edge from node to this group node anymore.

The graph is acyclic, but somehow new dagreD3.render()(d3.select("svg g", g)) ignores, that bottom_group is in g.nodes().

console.log(dagreD3.graphlib.alg.isAcyclic(g)); // true
console.log(g.node("bottom_group")) // Object { label: "Bottom Group", ...

Libraries:

• https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js
• https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.1/dagre-d3.js

[hastebrot]

This error is thrown whenever a or b in g.setEdge(a, b) is a group node.

[thenylify]

@hastebrot thank you so much for you reply dude. And yes, I did notice that. What I don’t understand is the library created the parent node by using g.setNode function which is same as the way how we created the child node. I think this is a bug rather than a feature, this is a must have feature for a compound/nested graph. I want to make some changes in the library but it’s really hard for me as I don’t have much graph knowledge. @cpettitt if you can give some advice that would be great. I will keep trying.

[junneyang]

any solution?

[thenylify]

@junneyang No, no solutions yet...

[AmitMY]

Or any workaround?

[kfd9]

I have a same problem. How do solve it?

[ChanDaoH]

Any workaround ?

[Polad10]

I used d3-graphviz library.

[m1666]

let g = new graphlib.Graph({ directed: true, compound: true });
Try increasing the parameter compound like above

[silentport]

Any workaround ?

[f-gueguen]

I fixed it the following way:

node_modules/dagre/lib/layout.js
in runLayout:

  time("    rank",                   function() { rank(util.asNonCompoundGraph(g)); });

becomes

  time("    rank",                   function() { rank(g); });

then in node_modules/dagre/lib/position/index.js
in position(g) {
remove

 g = util.asNonCompoundGraph(g);