Hi,
I’m trying to build a graph with tree layout structure
I have made node templated changes and also link template, still, somehow links are getting tangled or overlap each other, spacing between nodes remains same.
Not sure which property of link and node template should I use to achieve a simple design
Data I’m getting for the graph is server-side, I can not give a specific location, so the positioning of the node should be dynamic
You appear to have Groups in your Diagram – is that intentional? I do not see them in your first screenshot. If you want to have Groups but not have them be treated as Nodes when determining the layout of the whole diagram, set their Group.layout to null.
Yes Grouping was intentional, I also have to make the collapsed state of subgraph circular (like in design)
layout: $(go.LayeredDigraphLayout, {
columnSpacing: 0,
direction: 90,
layerSpacing: 90,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSink,
cycleRemoveOption: go.LayeredDigraphLayout.InitDepthFirstOut,
packOption: go.LayeredDigraphLayout.PackStraighten
}),
Link
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 50,
adjusting: go.Link.Fill,
reshapable: false,
relinkableFrom: false,
relinkableTo: false,
};
Yes, it is clear that the graph is not tree-structured, so a TreeLayout might not do it justice.
Now Tangled and overlapping links are my problem.
I want to graph to take full advantage to available space, this graph is small, I have data with 500[+] links and 20 nodes, I want to avoid links to overlap or tangle
Is there still a problem?
Yes, when you have lot of links going in an out of a nodes, links overlap each other
Could you please show an example? The above screenshot doesn’t show any problem, in my opinion.
Those links seems to be spread out horizontally very nicely.
any other way to avoid link overlapping each other
I have increased columnSpacing: 50
in link templates what property should I add to make them spread out more and avoid overlapping ?
There are no overlapping links in your screenshots. Could you please show what you want instead?
I want to links to look like this, straight (I can remove curve property) and spread
That is the default behavior. Don’t set any fromSpot or toSpot. Don’t set Link.routing.
You could try using a ForceDirectedLayout as the Diagram.layout. But if you want to continue using a layout that produces layers, tell it not to set fromSpot or toSpot, by setting TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot to false, or by setting LayeredDigraphLayout.setsPortSpots to false.
