dagre-d3
dagre-d3 copied to clipboard
Unable to draw an edge from a child to parent in compound graph
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
PLEASE SEE THE JSFIDDLE: http://jsfiddle.net/thenylify/Lbjm54ob/8/
Seems once you promoted a node to a group node you can't define an edge from node to this group node anymore.
![screen shot 2018-03-28 at 23 46 14](https://user-images.githubusercontent.com/496255/38058206-5509b0d8-32e2-11e8-9ac0-b0319ceb3a23.png)
![screen shot 2018-03-28 at 23 46 38](https://user-images.githubusercontent.com/496255/38058208-586e17c8-32e2-11e8-8050-5ffc316f6c6b.png)
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
This error is thrown whenever a
or b
in g.setEdge(a, b)
is a group node.
@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.
any solution?
@junneyang No, no solutions yet...
Or any workaround?
I have a same problem. How do solve it?
Any workaround ?
I used d3-graphviz library.
let g = new graphlib.Graph({ directed: true, compound: true });
Try increasing the parameter compound like above
Any workaround ?
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);