@Giosk wrote:
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?
Posts: 8
Participants: 2