CODEWITHSUNDEEP
javascriptdirected-graphjointjsdagre
Mark Dyson
Mark Dyson

Reputation: 305

Dynamically adding nodes to JointJS graph. Set rank ordering in joint.layout.DirectedGraph?

I'm implementing a process flow diagram in JointJS where the user can delete elements as well as add new ones, and re-link things in a variety of orderings. The graph is using the auto-layout features of the joint.layout.DirectedGraph library with Dagre to re-organize the graph each time something is deleted, added, unlinked or re-linked. One odd issue has cropped up and I'm not sure yet how to handle it.

Say I have a "fork" process with two out ports, one on each side, and a single in port at the top. Depending on the ordering of the elements in the array, the auto layout can sometimes place the child element of the left-hand port to the right of the child element of the right-hand port, so the resulting links are crossed.

Is there some straightforward way to influence the rank ordering in the layout? I expect I could re-order the elements in the array when things change so they are more tractable from Dagre's point of view but I'm not certain how the ordering actually pans out in practice. Even better would be some attribute similar to a z index but for left-to-right bias that I could set and Dagre would honor but I don't believe such a thing is hiding in the code.

Does anyone have some ideas or suggestions how I might scrub the layout to uncross such occurrences?

Many thanks in advance!

Upvotes: 3

Views: 1677

Answers (1)

Mark Dyson
Mark Dyson

Reputation: 305

So in the end I simply tested for the problem cases and changed their order in the element array. The Directed Graph/Dagre libraries do, indeed, order elements on the same rank left to right in the order they are stored in the array.

Upvotes: 2

Related Questions