Diagram initial load with respect to a element


I have align document to go.Spot.TopCenter, but sometime my first node/element is coming at top right corner or sometime top left corner. Similarly if the diagram is drawn from left to right , at that time I have align document to go.Spot.LeftCenter but but sometime my first node/element is coming at left top/bottom.

Is there any way in which I can make a particular element to come at centerTop or centerLeft.

Thanks in advance.

At what time are you calling Diagram.alignDocument? If you are doing it immediately after setting Diagram.model with a model holding your node and link data, then I am guessing it is too early because the diagram hasn’t had time to finish measuring and arranging each node, perform layouts, route links, compute the document bounds, and scroll and zoom according to the various “initial…” Diagram properties.

Or are you setting Diagram.initialDocumentSpot and initialViewportSpot before setting the model? https://gojs.net/latest/intro/initialView.html That should work to do what I think you want.

Or did you have some more specific initial alignment criteria with respect to the viewport? In that case you should implement an “InitialLayoutCompleted” DiagramEvent listener that sets the Diagram.position the way that you want. This is when you can call Diagram.alignDocument, which is called automatically for you if you had set Diagram.initialDocumentSpot and Diagram.initialViewportSpot.

Thanks for swift response
No, Actually my diagram is getting align to the center, so that is not an issue,
issue is like the first node it self is not at center in some condition.
And I was seeking that once everything is plotted then i want that 1st node is at top-center/left-center of the viewport
PFA the sample image for your reference.
In this viewport is in center-top of diagram, and my start node (circle node) is at right corner.
Some time this node can be at center, and some time left.
I want to keep viewport so as this node is in canter of the viewport.


For clarification, the document bounds would be a rectangle that just encloses the area of your nodes and links. Which is smaller than the big rectangle that you have drawn.

I think you want to call https://gojs.net/latest/api/symbols/Diagram.html#centerRect in an “InitialLayoutCompleted” DiagramEvent listener. You don’t need to set those “initial…” properties on the Diagram.

Please read https://gojs.net/latest/intro/initialView.html, which has an example of this.

1 Like

No, the viewport, the doted box is visible to user and other big rectangle is full diagram.

Thank you @walter it resolved my issue.