I’m creating a diagram which is created incrementally adding nodes and links calling my backend api and I’m trying to figure out which layout fits best for my purpose.
I tried two types of layout: the BandedTreeLayout (same as the one found in samples) and the LayeredDigraphLayout.
Case BandedTreeLayout
This is my layout with its options:
layout: $(BandedTreeLayout, {
angle: 0,
arrangement: go.TreeLayout.ArrangementHorizontal,
treeStyle: go.TreeLayout.StyleLayered,
alignment: go.TreeLayout.AlignmentCenterChildren,
nodeSpacing: 20,
nodeIndent: 0,
nodeIndentPastParent: 0,
layerSpacing: 150,
layerSpacingParentOverlap: 0,
compaction: go.TreeLayout.CompactionBlock,
breadthLimit: 0,
rowSpacing: 20,
rowIndent: 10,
setsPortSpot: false,
setsChildPortSpot: false,
})
The result is good as you can see in the picture below:
and adding new nodes the result is always good until I add some nodes that are parent and in that case the result isn’t good as you can see in the picture below:
Using this layout is it possible to add parents not at the top of all the diagram, but in a more well-ordered way?
Case LayeredDigraphLayout
This is my layout with its options:
> layout: $(go.LayeredDigraphLayout, {
direction: 0, layerSpacing: 50, columnSpacing: 50, cycleRemoveOption: go.LayeredDigraphLayout.CycleGreedy, //.CycleDepthFirst, layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource, initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut, aggressiveOption: go.LayeredDigraphLayout.AggressiveMore, packOption: go.LayeredDigraphLayout.PackAll, isRouting: true, setsPortSpots: false, }),
The result is good except for the links that behave in a very strange way
and expanding the parents, the new nodes are arranged in a good place, but as I said the links are a mess
This is my link template:
$(
go.Link,
{
routing: go.Link.AvoidsNodes,
layerName: "Background",
zOrder: 2,
corner: 5,
curve: go.Link.JumpGap,
},
$(go.Shape, { strokeWidth: 1.5, stroke: "#A9A9A9" }),
$(go.Shape, { toArrow: "standard", stroke: null, fill: "#A9A9A9" }),
$(
go.TextBlock,
{
textAlign: "center",
font: "9pt helvetica, arial, sans-serif",
margin: 4,
segmentIndex: 3,
segmentFraction: 0.6,
segmentOffset: new go.Point(0, -5),
},
new go.Binding("text", "LinkName"),
new go.Binding("text", "LinkLabel")
)
)
The only thing in the entity template that I think is important to mention is the fromSpot and toSpot
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.LeftSide,
What can I change in order to obtain a good solution?