graph scrolls left after loading multiple nodes.

[mssayari]

Describe the bug
When I create a graph with a single node and add new nodes one by one, it works great, but when I load all of the nodes and links, it scrolls to the left side and I see an empty area.
To see the graph, I have to zoom-out and find the graph by swiping to the right.

To Reproduce
I created a live demo, so you can see the behavior, Online Demo

Expected behavior
graph should be loaded in the center of the page (visible area)

Desktop (please complete the following information):

• OS: MacOS Ventura
• Browser [chrome, FireFox]
• Version [113,113]

I'm not sure if this is a bug or I'm doing it the wrong way

[jason-rietzke]

I believe this is an interesting question in general so I converted it to a discussion again for others to discover 🙂

This behaviour is caused by the collision and repelling forces between the nodes. Especially in the beginning stages when all nodes are generated at the same default coordinates (0, 0) this can often result in a rather uncontrolled "explosion" of the graph which can also cause a shift in random directions. This setup is very volatile an slight changes to the start configuration can have large effects on the movements of all nodes.

In cases like yours where you wish to have a rather finite control of the outcome, there are a few strategies you can consider.

1. for starters I think in the end you would probably want to control the positions of each node to reliably recreate a graph. In this case you can set the x and y properties on the node data. see here
2. furthermore you could utilise an anchor on your node that applies a fixed position. This can be applied on all nodes (perhaps alongside the fixed positioning) or you can choose a starting node that always stays on the same position. This will cause all other nodes to implicitly arrange around this node. see here

A few more things you could experiment with:
From our experience in cases we like to carefully control node positions, we like to decrease the repelling force of the nodes see here (sometimes to 0) which introduces weaker forces and therefore results in a less volatile setup.
Using the spawn property see here could also be interesting in case you want to create nodes related to each other in a relative position to one another. This works especially well during data updates but could also be utilised to create certain start patterns. Although this strategy might be in conflict with using x, y positions or anchors so keep that in mind.

One more thing that might get handy is the moveTo method of the ForceSimulation see here. The enables you to move the entire graph (or certain nodes) into focus.

simulation.moveTo({
    nodes: graph.nodes,
});

[jason-rietzke]

One more thing I recognised in your demo is that you want to use Graphly with Vue3. In this case I just want to point out that the library already contains a Vue3 component wrapper that you can easily use 🙂 https://docs.graphly.dev/components/vue3/

[mssayari]

sure, will test it. 🙏

[mssayari]

Thanks for the reply and great explanation,

Tbh, I'm really new to the d3; I have to learn much more to be able to use it. Thanks to your library, it's much easier to create things.
for now, I'm going with the anchor solution, it worked for me, but as you mentioned eventually I'm gonna need to save users' desired positions and retrieve them on loafing the graph.

[jason-rietzke]

Glad you find it so handy 👍 and no worries, d3 can be quite tricky to work with. That was one of the primary reasons to develop the library in the first place.