LayeredDigraphLayout Node Alignment

We’re using LayeredDigraphLayout with bands. See the following screenshot and model for reference.

"nodes": [
    { "key": 1, "name": "Start Node" },
    { "key": 2, "name": "Group", "isGroup": true },
    { "key": 3, "name": "After Group" },
    { "key": 4, "name": "Next Node" },
    { "key": 5, "name": "End Node" },
    { "key": 10, "name": "Path 1", "group": 2 },
    { "key": 20, "name": "Path 2", "group": 2 },
    { "key": 30, "name": "Path 3", "group": 2 },
    { "key": 40, "name": "Path 4", "group": 2 },
    { "key": 11, "name": "Path 1.1", "group": 2 },
    { "key": 21, "name": "Path 2.1", "group": 2 },
    { "key": 22, "name": "Path 2.2", "group": 2 },
    { "key": 41, "name": "Path 4.1", "group": 2 }
],
"links": [
    { "from": 1, "to": 2 },
    { "from": 1, "to": 10, "transparent": true },
    { "from": 1, "to": 20, "transparent": true },
    { "from": 1, "to": 30, "transparent": true },
    { "from": 1, "to": 40, "transparent": true },
    { "from": 10, "to": 11, "group": 2 },
    { "from": 20, "to": 21, "group": 2 },
    { "from": 21, "to": 22, "group": 2 },
    { "from": 40, "to": 41, "group": 2 },
    { "from": 2, "to": 3 },
    { "from": 11, "to": 3, "transparent": true },
    { "from": 22, "to": 3, "transparent": true },
    { "from": 30, "to": 3, "transparent": true },
    { "from": 41, "to": 3, "transparent": true },
    { "from": 3, "to": 4 },
    { "from": 4, "to": 5 }
]

The links with “transparent” = true are invisible (opacity = 0).

As you can see, our diagram flows from left to right (horizontally). We would like the nodes to be vertically aligned in the middle so that the links are straight lines from left to right if link crossing and overlapping nodes are not an issue when laying things out. As you can see in this diagram, link crossing and overlapping nodes aren’t an issue.

We’d like the following nodes to be vertically aligned middle so that the link is straight from left to right instead of curved.

  • “Start Node” -> “Group”
  • “Path 2.1” -> “Path 2.2”
  • “Path 4” -> “Path 4.1”
  • “Group” -> “After Group”
  • “After Group” -> “Next Node”

Is this possible? I’ve tried tweaking the LayeredDigraphLayout properties to no avail. We’re using GoJS v1.4.8.

I’m not sure why it looks the way it does, but its probably the transparent links, which are still accounted for in the layout.

can you data bind it so “transparent” also sets Part.isLayoutPositioned to false? That would probably be enough to make your layout appear smoother. You may also need to exclude your group from the layout.

The group is not included in the layout. Also, setting Part.isLayoutPositioned = false for transparent links didn’t change anything.

If I remove the group and transparent links, I see the same layout issues.

"nodes": [
    { "key": 1, "name": "Start Node" },
    { "key": 3, "name": "After Group" },
    { "key": 4, "name": "Next Node" },
    { "key": 5, "name": "End Node" },
    { "key": 10, "name": "Path 1", "group": 2 },
    { "key": 20, "name": "Path 2", "group": 2 },
    { "key": 30, "name": "Path 3", "group": 2 },
    { "key": 40, "name": "Path 4", "group": 2 },
    { "key": 11, "name": "Path 1.1", "group": 2 },
    { "key": 21, "name": "Path 2.1", "group": 2 },
    { "key": 22, "name": "Path 2.2", "group": 2 },
    { "key": 41, "name": "Path 4.1", "group": 2 }
],
"links": [
    { "from": 1, "to": 10 },
    { "from": 1, "to": 20 },
    { "from": 1, "to": 30 },
    { "from": 1, "to": 40 },
    { "from": 10, "to": 11, "group": 2 },
    { "from": 20, "to": 21, "group": 2 },
    { "from": 21, "to": 22, "group": 2 },
    { "from": 40, "to": 41, "group": 2 },
    { "from": 11, "to": 3 },
    { "from": 22, "to": 3 },
    { "from": 30, "to": 3 },
    { "from": 41, "to": 3 },
    { "from": 3, "to": 4 },
    { "from": 4, "to": 5 }
]

We’d like the following nodes to be vertically aligned middle.

  • “Start Node” middle aligned with 4 output nodes
  • “Path 2.1” -> “Path 2.2”
  • “Path 4” -> “Path 4.1”
  • “After Group” middle aligned with 4 input nodes
  • “After Group” -> “Next Node”

Is this possible? My product managers are really hoping for a solution that would help our diagrams look better with things aligned.

Here are my LayeredBandDigraphLayout settings.

aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
packOption: go.LayeredDigraphLayout.PackAll,

I’ve already tried tweaking these but nothing helped to improve the layout.

Unfortunately LayeredDiagraphLayout cannot guarantee that nodes will line up as you’re expecting. You might get slightly better results with your modified diagram if you leave the layeringOption as the default value, though.