Need some customization in Layered Digraph Layout

GoJS
1

Hi,
I need to customize layered diagraph layout in my diagram. I need to position diagram nodes according to requirement. In current scenario diagram nodes are not positioned according to requirement.
According to layered diagraph layout my diagram is rendered as :-

LayerdDiagraphLayout
LayerdDiagraphLayout1586×900 157 KB

Here requirement is to position nodes in balance tree manner. for example if we see first level of nodes after start node than nodes should be positioned uniformly as per diagram (Expected)

ExpectedLayout
ExpectedLayout1586×900 9.08 KB

This need to be done with layered diagraph layout only (not using tree layout) because looping is also there in our diagram (Parents can have multiple Childs and vice-versa ).

So, please give me some suggestion or way to customize layered diagraph layout

Thanks in advance.

2

For the example graph that you show, the results will be similar to what you expect, except that all of the nodes in each layer will be aligned horizontally in a row.

Maybe you want to customize the layout so that some links/edges, especially ones that cycle back, do not participate in the layout and routing? It’s hard for me to know what it is that you want.

3

Basically I want to put all the nodes according to requirement (Uniformly distributed like balanced tree). and want to improve some links and edges (they all should be straight and follow shortest path b/w nodes).

4

Try setting LayeredDigraphLayout.setsPortSpots to false, and not setting fromSpot or toSpot.

5

Hi Walter,
Right now we are using both properties in our layout as I mentioned in my below code:-

layout: $(go.LayeredDigraphLayout,

    {

      direction: 90,

      layerSpacing: 50,

      columnSpacing: 50,

      layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,

      initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
      setsPortSpots: false,

      isRouting: true,

      isValidLayout: true,

      isViewportSized: true,

    }),

We need to override your go.LayeredDigraphLayout.prototype.doLayout() method so that we can achieve our custom node placing (we need to divide the nodes into two halves) and link routing as per requirement

So please provide some examples so I can override that method.

6

OK, so you are setting LayeredDigraphLayout.setsPortSpots, but are you not setting fromSpot or toSpot on any port/node or link?

7

yes, we are using fromSpot and toSpot on nodes (As we have to do incoming on top and outgoing from bottom) but not setting spots on links

8

Well, that’s why all of the links are coming into the top and going out of the bottom of each node. If you want “follow shortest path b/w nodes”, then you need to allow “backwards” links to come out of the top and go into the bottom of nodes. The easiest way to do that is to not set the fromSpot and not set the toSpot.

9

hi Walter, As per our requirement we have to make sure that link is coming from bottom and going into top. So we have to set both ports on nodes.
Is there any way to customize layered diagraph layout? so, we can place nodes and links according to our requirement .

10

OK, so you don’t want “follow shortest path b/w nodes” after all.

There are lots of ways to customize a LayeredDigraphLayout. Look at its methods in the go.d.ts file, that you could override.

Do you have a model that I could work with?