How to show all nodes in one diagram?

GoJS
1

Hi,
I’m new to GoJS and I have this example I really liked:

However when I add many more nodes to OCIO_Data.json ,
It seems like it still shows only the first few of them while ignoring the rest.
Is it possible to make it continue rendering the rest of the nodes to the right side (so the user can scroll to the right and discover more nodes)?

Thanks!

2

All of the nodes and links are there – the user or your code just needs to scroll and/or zoom to see them.

If you want to show the whole organization (nodes and links) when the diagram first appears, set Diagram.initialAutoScale to either go.Diagram.Uniform or go.Diagram.UniformToFill, depending on whether you want to have zero scrollbars or at most one.

$(go.Diagram, . . .,
  {
    initialAutoScale: go.Diagram.Uniform,
    . . .
  })
3

Hi Walter,

Thanks for your reply!
I’ve made another codesandbox, this time with some more data:

However I’m still not able to scroll to the right.
Attached a screen recording of what I see:
https://drive.google.com/file/d/1GGbhDxE3CuFpzCYdOOwTm5n6Z8Twjx1N/

Note that when I drag a node to the right side, it doesn’t actually discover more nodes but just shrinks the current nodes.
Any attempt to scroll to the right didn’t work out.

Am I missing something?
Thanks!

4

Make sure the entire HTMLDivElement (that is hosting the Diagram) is completely visible in the page. As it is it seems to have a constant width of 1550px, so of course the diagram thinks that everything is visible, when in reality the Div is being clipped by the page.

5

Would you be able to light my eyes and show a tiny example of how to set it correctly?
I’m struggling with it for a few hours - I tried adjusting the divs but nothing seems to show more nodes that what’s currently visible.

6

A lot of our samples have that Div styled with width:100% or something like that.

But it depends on how you want to organize your page. Really, GoJS doesn’t care, as long as the width and height are at least one pixel each.