I’m using a LayeredDigraphLayout to visualize a business process flow chart. There are many backward links, loops, doubled links, etc, but there is a clear first and last node. How do I make it so the first node is at the top and the last node at the bottom?
Does that “first” node have any links coming into it?
Does that “last” node have any links going out of it?
No, they’re specifically “Start” and “End” Nodes, added for that purpose.
That’s odd – then I would think those two nodes would automatically be in their own beginning and ending layers. Do you have a screenshot?
How have you configured your LayeredDigraphLayout?
This is my code:
diagram.model = new go.GraphLinksModel(js[0], js[1]
);
diagram.model.linkKeyProperty = 'key';
diagram.layout = new go.LayeredDigraphLayout({
direction: 90,
layerSpacing: 15,
setsPortSpots: false,
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
cycleRemoveOption: go.LayeredDigraphLayout.CycleGreedy,
initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
iterations: 100,
});
Ah, so the red node that is currently in the top layer in your screenshot doesn’t have any links coming into it, so it is a reasonable node to be in the top layer.
There are several solutions, but I’m not sure what’s best for your situation.
You could add some dummy LayeredDigraphEdges in the LayeredDigraphNetwork from the “first” vertex (corresponding to your “first” node) to the other vertexes that you don’t want to be in the top layer. This can be accomplished in an override of LayeredDigraphLayout.makeNetwork.
Or you could artificially assign the layer of the “first” vertex by overriding LayeredDigraphLayout.assignLayers. See for example the Sankey sample. Note that the bottom layer is layer zero.
OK, thanks, I’ll see what works.
I made a layout that specifically sets ‘start’ to the top layer and ‘end’ to the bottom one, but it still places the red node at the top:
class BupryLayout extends go.LayeredDigraphLayout {
assignLayers() {
super.assignLayers();
var maxlayer = this.maxLayer;
// now make sure every vertex with no outputs is maxlayer
for (var it = this.network.vertexes.iterator; it.next();) {
var v = it.value;
var node = v.node;
if (node.key === 'end') {
v.layer = 0;
}
if (node.key === 'start') {
v.layer = maxlayer;
}
}
}
}
Ah, so you have an additional requirement that the “start” node be the only one (or ones?) in the top layer. OK, try setting its v.layer = maxlayer+1.
That did the trick, thank you!