How to maintain nodes at the same level in dagre-d3

299 views Asked by At

I have created a simple flow chart using dagreD3, please check the example here

I have few set of nodes

  graph.setNode('a', {label: 'a', height: 20, width: 40})
  graph.setNode('b', {label: 'b', height: 20, width: 40})
  graph.setNode('c', {label: 'c', height: 20, width: 40})
  graph.setNode('d', {label: 'd', height: 20, width: 40})
  graph.setNode('e', {label: 'e', height: 20, width: 40})
  graph.setNode('f', {label: 'f', height: 20, width: 40})
  graph.setNode('main', {label: 'Main', heihgt: 100})

Which has edges like this

  graph.setEdge('a', 'c')
  graph.setEdge('b', 'c')
  graph.setEdge('c', 'main')
  graph.setEdge('d', 'e')
  graph.setEdge('e', 'main')
  graph.setEdge('f', 'main')
  // graph.setEdge('main', 'e')

The problem here is, there is last edge graph.setEdge('main', 'e'), as main is parent of e, the e node comes below the main node.

What i am expecting is when i try to set a edge from main to e it should maintain the same level and draw a line from main to e. I just wanted to maintain main at last level of flow chart. Is there any possible way to maintain main at the same level and all remaining nodes should be on top of the main?

In the above link please uncomment this line graph.setEdge('main', 'e') and see how the graph is changing.

0

There are 0 answers