I want sequence of nodes subnetwork according to node data

GoJS
1

LayOut:
layout: $(go.LayeredDigraphLayout,
{
setsPortSpots: true,
direction: 90,
layerSpacing: 65,
columnSpacing: 30,
//isInitial: true,
isOngoing:false,
aggressiveOption: go.LayeredDigraphAggressive.None, // Maintain order within layers
}),

ScreenShot:

image
image1856×836 66.6 KB

2

Do you need to use LayeredDigraphLayout for each subnetwork instead of TreeLayout? It doesn’t really support sorting (but TreeLayout does), so I suggest that you use the ArrangingLayout extension, where the ArrangingLayout.primaryLayout ArrangingLayout | GoJS API is your current desired LayeredDigraphLayout and the ArrangingLayout.arrangingLayout ArrangingLayout | GoJS API is a GridLayout which has GridLayout.sorting and GridLayout.comparer set the way that you want.

3

not compulsory to use LayeredDigraphLayout.
can you give me solution with Treelayout and ArrangingLayout?

I have tried below code but not getting correct sequence:
this.myDiagram.layout = $(ArrangingLayout, {
primaryLayout: $(go.TreeLayout,
{
angle: 90,
layerSpacing: 65,
}), // Layout for connected nodes
arrangingLayout: $(go.GridLayout, {
alignment: go.GridLayout.Position,
arrangement: go.GridArrangement.LeftToRight
}), // Layout for arranging subnetworks
});

4

You need to set GridLayout.sorting and comparer.

5

If you set TreeLayout.sorting and comparer, you might not need to use ArrangingLayout and GridLayout at all.

6

Is comparer a custom function?

7

Yes, the library cannot know how you want to sort, so the function needs to depend on your data. Here’s an example:

  new go.Diagram("myDiagramDiv", {
      layout: new go.TreeLayout({
        sorting: go.TreeSorting.Ascending,
        comparer: (v, w) => {
          // just compare root nodes/vertices
          if (v.parent || w.parent) return 0;
          // could compare smarter than just comparing string lengths
          return w.node.data.text.length - v.node.data.text.length
        }
      }),