LayeredDigraphLayout changes vertical order of nodes

GoJS
1

For my group template, I use LayeredDigraphLayout. However, once the layout is applied, the nodes are vertically reversed. How can I prevent this?

2

What do you mean by “vertically reversed”? A small screenshot would help, along with one that shows what you would prefer.

3

Hi walter, what happens is that, if the nodes were arranged in the diagram like:

node1
node2
node3

after the group layout is applied, their order is:

node3
node2
node1

4

Do you need to change the value of LayeredDigraphLayout.direction?

5

I didn’t notice you answered…
I havn’t tried changing the direction, it is set to default… I want it to grow to the right, these are nodes that are in the same column

6

Hi, walter, I just wanted to ping regarding this question.

7

Hello, sorry we missed this one.

I understand what you’re saying now. The problem in this case is that LayeredDigraphLayout doesn’t guarantee which layers a node will be placed into, and doesn’t have an easy way of comparing nodes within a layer since it shuffles things around to reduce link crossings in most cases.

Have you considered using a TreeLayout? That way you could use TreeLayout.comparer to organize your nodes.

8

I haven’t, I might give it a try… I would then simply compare them by their initial y coordinates?

9

You would probably want to set the sorting to TreeLayout.SortingAscending and then your comparer function should return however you’d like them sorted, whether that be by key or some other property.

10

I tried using TreeLayout a few moments ago, but I get the same thing… the links are crossed and the nodes are sorted in reverse… I think this only happens for nodes with no in links… or bottom children in a tree… I don’t know, maybe it has something to do with me using the subGraphExpander button?
The group is not initially expanded…

11

How is your TreeLayout configured?

12

I’ve tried configuring the tree layout with like this… I dont use any layout on the diagram:

layout: $(go.TreeLayout, {
                    layerSpacing: 10,
                    nodeSpacing: 10,
                    layerStyle: go.TreeLayout.LayerSiblings,
                    setsPortSpot: false,
                    // sorting: go.TreeLayout.SortingForwards
                })
13

But you haven’t set sorting and comparer as Jon suggested.

14

you are right… I tried with different sortings, but didn’t try the comparer… I apologize to the both of you… it seems to be working now… thank you!