Align set of nodes in horizontal and vertical order under a specific node

GoJS
1

I am using LayeredDigraphLayout diagram. In that, All my nodes are horizontally aligned. But I want to align the set of nodes to be vertically aligned based on the data under a specific node remaining all should be horizontally aligned

Screenshot 2024-09-26 163109
Screenshot 2024-09-26 163109577×505 10.4 KB

2 connected lines are displayed from the source node. I have created a group for all vertical nodes.

Node Data Array is as follows:
[
{
“key”: “_BANDS”,
“category”: “BANDS”,
“itemArray”: [
{
“text”: “CONFIGURATION GROUP”,
“start”: 0,
“depth”: 2,
“__gohashid”: 8458,
“bounds”: {
“J”: 0,
“K”: 0,
“ga”: 1255,
“ea”: 393.46092530742385,
“_isFrozen”: false
}
},
{
“text”: “SETTING GROUP & SETTING”,
“start”: 2,
“depth”: 3,
“__gohashid”: 8468,
“bounds”: {
“J”: 0,
“K”: 393.46092530742385,
“ga”: 1255,
“ea”: 760.2752807761738,
“_isFrozen”: false
}
}
],
“__gohashid”: 8419
},
{
“key”: “66ed71dc3d7124f09d479e0a”,
“category”: “PARENT_CONFIGURATION_GROUP”,
“band”: “CONFIGURATION GROUP”,
“id”: “66ed71dc3d7124f09d479e0a”,
“parentId”: “”,
“errorMessage”: “”,
“groupId”: “66ed71dc3d7124f09d479e09”,
“groupName”: “COIL 2 sc”,
“groupType”: “CONFIGURATION”,
“hardwareType”: “COIL”,
“__gohashid”: 8420
},
{
“key”: “66ed71ee3d7124f09d479e19”,
“category”: “CHILD_CONFIGURATION_GROUP”,
“band”: “CONFIGURATION GROUP”,
“id”: “66ed71ee3d7124f09d479e19”,
“parentId”: “66ed71dc3d7124f09d479e0a”,
“errorMessage”: “”,
“groupId”: “66ed71ee3d7124f09d479e18”,
“groupName”: “Standard 2”,
“groupType”: “CONFIGURATION”,
“__gohashid”: 8421
},
{
“key”: “66f29d9815144698795f1c0a”,
“category”: “SETTING_GROUP”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f29d9815144698795f1c0a”,
“parentId”: “66ed71ee3d7124f09d479e19”,
“errorMessage”: “”,
“groupId”: “66f29d9815144698795f1c09”,
“groupName”: “Additional Accessories”,
“groupType”: “ACCESSORIES”,
“isRequired”: true,
“__gohashid”: 8422
},
{
“key”: “66f29daa15144698795f1c32”,
“category”: “SETTING_GROUP”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f29daa15144698795f1c32”,
“parentId”: “66f29d9815144698795f1c0a”,
“errorMessage”: “”,
“groupId”: “66f29daa15144698795f1c31”,
“groupName”: “Single Crowder”,
“groupType”: “CROWDER”,
“isRequired”: false,
“__gohashid”: 8423
},
{
“key”: “66f5294a151446987982bcde”,
“category”: “CONFIGURATION_SETTING”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f5294a151446987982bcde”,
“parentId”: “66f29daa15144698795f1c32”,
“errorMessage”: “”,
“settingId”: “66d830a0b33cf2a4d666a7ff”,
“settingName”: “abc123”,
“settingType”: “SEGMENT”,
“technologies”: ,
“__gohashid”: 8424
},
{
“key”: “66f5295d151446987982c202”,
“category”: “CONFIGURATION_SETTING”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f5295d151446987982c202”,
“parentId”: “66f29daa15144698795f1c32”,
“errorMessage”: “”,
“settingId”: “66dace14004511519f22a5a5”,
“settingName”: “cs123”,
“settingType”: “SEGMENT”,
“technologies”: ,
“__gohashid”: 8425
},
{
“key”: “66ed720e3d7124f09d479e47”,
“category”: “SETTING_GROUP”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66ed720e3d7124f09d479e47”,
“parentId”: “66ed71ee3d7124f09d479e19”,
“errorMessage”: “”,
“groupId”: “66ed720e3d7124f09d479e46”,
“groupName”: “Tary 2”,
“groupType”: “TRAY”,
“groupTypeUI”: “SETTING_GROUP”,
“isRequired”: true,
“__gohashid”: 8426
},
{
“key”: “66ed72543d7124f09d479e66”,
“category”: “SETTING_GROUP”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66ed72543d7124f09d479e66”,
“parentId”: “66ed71ee3d7124f09d479e19”,
“errorMessage”: “”,
“groupId”: “66ed72543d7124f09d479e65”,
“groupName”: “Helix Timming”,
“groupType”: “HELIXTIMING”,
“groupTypeUI”: “SETTING_GROUP”,
“isRequired”: true,
“__gohashid”: 8427
},
{
“key”: “66f2625815144698795cfdca”,
“category”: “CONFIGURATION_SETTING”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f2625815144698795cfdca”,
“parentId”: “66ed72543d7124f09d479e66”,
“errorMessage”: “”,
“settingId”: “66f2625815144698795cfdc9”,
“settingName”: “fdf”,
“settingType”: “CONFIGUREDTECHNOLOGY”,
“technologies”: [
{
“technologyId”: “668e4e88b528d444fa37ed5f”,
“quantity”: 1
},
{
“technologyId”: “668e1a7ab528d444fa2dc735”,
“quantity”: 1
}
],
“__gohashid”: 8428
},
{
“key”: “GROUP-66f2625815144698795cfdca”,
“isGroup”: true,
“band”: “SETTING GROUP & SETTING”,
“__gohashid”: 8429
},
{
“key”: 6,
“category”: “CONFIGURATION_SETTING_TECHNOLOGY”,
“band”: “SETTING GROUP & SETTING”,
“group”: “GROUP-66f2625815144698795cfdca”,
“parentId”: “66f2625815144698795cfdca”,
“settingId”: “66f2625815144698795cfdc9”,
“technologyId”: “668e4e88b528d444fa37ed5f”,
“technologyName”: “10 build dev”,
“imageUrl”: “…/…/…/…/…/assets/images/image-placeholder.svg”,
“typeValue”: “Position Part”,
“__gohashid”: 8430
},
{
“key”: 7,
“category”: “CONFIGURATION_SETTING_TECHNOLOGY”,
“band”: “SETTING GROUP & SETTING”,
“group”: “GROUP-66f2625815144698795cfdca”,
“parentId”: “66f2625815144698795cfdca”,
“settingId”: “66f2625815144698795cfdc9”,
“technologyId”: “668e1a7ab528d444fa2dc735”,
“technologyName”: “10 Jul Build”,
“imageUrl”: “…/…/…/…/…/assets/images/image-placeholder.svg”,
“typeValue”: “Position Part”,
“__gohashid”: 8431
},
{
“key”: “66f53e4e151446987986f888”,
“category”: “SETTING_GROUP”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66f53e4e151446987986f888”,
“parentId”: “66f2625815144698795cfdca”,
“errorMessage”: “”,
“groupId”: “66ed720e3d7124f09d479e46”,
“groupName”: “Tary 2”,
“groupType”: “TRAY”
“isRequired”: true,
“__gohashid”: 8432
},
{
“key”: “66ed72c63d7124f09d479ea6”,
“category”: “CONFIGURATION_SETTING”,
“band”: “SETTING GROUP & SETTING”,
“id”: “66ed72c63d7124f09d479ea6”,
“parentId”: “66ed72543d7124f09d479e66”,
“errorMessage”: “”,
“settingId”: “66ed72c63d7124f09d479ea5”,
“settingName”: “Helix TM 1”,
“settingType”: “HELIXTIMING”,
“technologies”: ,
“__gohashid”: 8433
}
]

Is there a way to have 2 different nodes alignment under a node with one connector line from source node

2

I was going to suggest using a Group, so I was pleased to see you doing that.

If you don’t want Links connecting to the individual Nodes in the Group, what do you want instead? If it is just one Link, do you want that Link to connect with the Group? How do you want it to be routed?

3

Is it possible to get merge connector lines to one like in the image

Screenshot 2024-09-26 181235

4

How are your Link and Group templates defined?

5

Below are my link and group template code

image
image840×789 65.9 KB

6

Try using Orthogonal routing instead of AvoidsNodes.

Wait – are you using a GraphLinksModel? TreeModel does not support Groups.

What’s in each such group? Are there any links connecting nodes that are members of the same group? (So the links would also be members of that group, rather than connecting an external node with an internal node.) I’m asking because it’s surprising using TreeLayout when there’s no “tree” of nodes and links inside the group. Just use GridLayout with wrappingColumn: 1

7

My diagram has swimlanes. So i’m using layeredDigraph with GraphLinksModel.
But some part of diagram should be vertically aligned and remaining to be horizontally aligned.

I’m expecting a diagram like below

Picture1
Picture11439×1111 10.1 KB

And my diagram looks like below. I have created a group for the highlighted part and only these nodes are having group details in its nodeData object

Picture3
Picture31439×1111 10.2 KB

Connectors Lines from B1 to all the nodes inside the group should be merged to single line. Can you please help to achieve this

8

Tried using GridLayout as well. Still the same issue

9

Here’s an example of a possible solution. It uses a custom Link class that routes links to group members with special points such that the links stay together. You may need to make adjustments for it to work with your setup, but the idea should be similar.

10

Hi jHardy,

Thanks for sharing. It works as expected