Render Issue - DoubleTreeLayout

GoJS
1

We’re using GoJs for risk management visualisation (Energy markets). One visualisation is to have threats on one side of an event and consequences on the other. Together they form a ‘Bow Tie’ shape. Our issue is that once we break 99 threats (or consequences) the rendering goes awry. The diagram below shows a test result of 100 threats. In red (bottom right) you can see the node that should be on the end of the 10th threat line has become orphaned. At the top you can see that the 10th threat line has shifted out of line with the other 9. Can anyone see why this would happen? Is there a limit we should be upping? I haven’t used toMaxLinks or fromMaxlinks so thay should be at ‘infinity’. Not sure what else I can check?

image
image1677×374 51.7 KB

By way of example, this is what a smaller, simple Bow Tie should look like:

image
image1667×388 53.7 KB

The data we use to generate the model will be added in comments below (for the broken diagram).

2

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

3

To decompress that text go here and switch the drop down to decompress: Compress text online - Special

4

Your data isn’t tree-structured. You have both:

{ from: -1, to: -100 }

and

{ from: 0, to: -100 }
5

It’s more like a double tree, a tree with roots if you like. I tried removing each of the links you noted but the diagram renders similarly out of shape with an orphaned item/s showing.

Any other ideas why this might happen?

6

Your model has three links connecting to node -100 – hence it’s definitely not tree-structured. So it should not be surprising that a TreeLayout doesn’t do what you want.

If you delete the { from: -1, to: -100 } and the { from: -91, to: -100 } link data, the tree looks more like what you want.

You need to figure out a better definition for directionFunction, since it probably doesn’t want to depend on key values to determine which way a subtree from the root node should go.

7

It was actually an issue with our code not matching the link IDs properly to the node IDs. Changing the very last two lines:

{ from: 0, to: -100 }
{ from: -100, to: -99 }

to:

{ from: 0, to: -111 }
{ from: -111, to: -99 }

Works perfectly. I will however also look into your advice on the direction function - thank you!