Unable to draw an edge from a child to parent 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.

Can someone please advice?

This is really urgent so can someone please help.

Much appreciated, Thanks, Michael

[rewweRrr]

Fix here: https://github.com/dagrejs/dagre/pull/293 Workaround: https://www.npmjs.com/package/dagre-cluster-fix Workaround for cytoscape-dagre : https://www.npmjs.com/package/cytoscape-dagre-cluster-fix

[420407904]

if (isNode(element)) {
      const { data,id } = element
      if(id!=="0"){
        const {parentId} = data
        if(parentId===0||parentId){
          g.setParent(id, parentId+"");
        }
      }
      g.setNode(element.id, {
        width: element.__rf?.width,
        height: element.__rf?.height,
      });
    } else {
      g.setEdge(element.source, element.target);
    }

I used setEdge before but i got the graph drawn by the nodes of the second level is evenly spaced, so I think they are caused by no parent-child relationship So you see that code i added the setParent I hope they can divide the space equally in their own area but i failed Uncaught TypeError: Cannot set properties of undefined (setting 'rank') i don’t know what to use