Hi
My diagram is using TreeLayout, it has four layers leftmost as root and rightmost as leaves.
I want to have some links on the first level nodes so I added another link template, setting “isTreeLink: false”. And they go from right side to right side.
Now everything else is working fine, besides the links are merged and overlapping each other.
Is it possible to add horizontal spacing between those links. What would be the ideal way to fix this problem?
Thank you very much!
Well, LayeredDigraphLayout does that automatically, at least for links connecting nodes in different layers. But the layout would be different than what you are getting now.
TreeLayout does not do what you want because tree structures do not have links that would cross.
Do your nodes use “…Side” Spots? If so, you might get that routing for some of those cases.
Thanks for the reply.
Yes I tried LayeredDigraphLayout and it does not preserve the current layout.
I want to preserve the current layout and having the black links coming out on the either LeftSide or RightSide. Is that possible?
Currently yes I do use “…Side” Spots
So ypur screenshot shows the actual current routing. OK, there already is a good bit of horizontal separation between the vertical segments of the links.
What I want to achieve is no vertical link overlaps with another. Now if you take a look at the screenshot, for example the third and fourth outgoing port on the first node of the second column eventually merges onto the same vertical line. And the second port on the second node on that column merges onto it as well. Is it possible to separate them?
Sorry. It is possible, but you will need to program it yourself. You also need to worry about not having enough horizontal space to ensure no segments overlap.
Could you give me some pointers on how to program it? Where should I look into? Thanks
I would add that functionality to the layout. So that means defining a subclass of TreeLayout, overriding TreeLayout.commitLinks to call the super method and then fix up any link segments, and replacing your Diagram.layout’s TreeLayout with an instance of your custom TreeLayout.
In your case fixing up overlapping link segments means first identifying all of the Links that have vertical segments at the same X value with overlapping Y values. You can look at the Points that are in the Link.points list for each Link.
Once you have identified a set of overlapping segments, you’ll need to shift all but one of those segments horizontally by replacing the two Points of that segment.
Then you’ll need to search again for overlapping segments.
Thanks for your advice.
I tried this code in current solution:
var testlinks = diagram.findLinksByExample({ category: "Dependencies" }); // gets me all the black links while (testlinks.next()) { var item = testlinks.value; var lst = item.points; }
the testlinks return me the iterator with correct number of links
but the var lst = item.points has zero point in the list
What is wrong here?
You are executing that code after the initial layout has been performed, aren’t you?
You are right, I put the code in the wrong position.
With regard to your suggestion earlier about subclass TreeLayout, currently those black edges are not a part of the tree layout as I set “isTreeLink: false”. I think including them in the tree layout would cause loops?
TreeLayout is tolerant of cycles in the graph.