Graph is rendering different layouts for the exact same nodes/links

[PedroVeloso95]

Describe the bug
Hello, im sorry if this is not a bug but could not find any information anywhere regarding this issue.
When using the ForceGraph and providing the exact same nodes and links, links having distances values which I then apply like this:

references.current.graphRef
.d3Force('link')
?.distance((link) => (link.distance > 1100 ? link.distance : 1000))
.iterations(graphData.nodes.length * 0.05);

it calculates a layout that stays that way but its not consistent across different environments, so for example, the exact same nodes and links will render a different layout on a QA environment versus localhost, sometimes even in the same environment it will render different layouts when I force a recalculation of the distances on my backend (the values come out exactly the same but the layout does not), if I don't recalculate the layouts stays fixed, I've double checked the distances many times to make sure there were no differences causing the layout changes.

Expected behavior
The graph should be equal to the same nodes/links

Is this expected behavior because of some internal randomness or it should be equal?

Thanks in advance

[PedroVeloso95]

Just to update , I found out this happens because when the nodes array have different sortings, so even though they contain the exact same information , if they are in different order a different layout is generated

[vasturiano]

@PedroVeloso95 that makes sense, because the default initial position of the nodes depends on their order (arranged in a phyllotaxis). And their initial position will most likely have an arbitrary effect on the final layout.

The one other source of randomness in the system is if two nodes exactly overlap in coordinates and you have a collision force trying to separate them. In this case, a random direction is given for the repelling of the two nodes. But this is unlikely to happen, unless the nodes are initialized at 0,0.

[dam13n]

@PedroVeloso95 In case it's useful to you, I also am trying to get consistent layouts. Once my layout fully settles, I save all the x, y values of the nodes, then when repopulating the graph later, I set the x, y values for each accordingly, but also set vx, vy for each node to 0. And this is working well for me so far!

[PedroVeloso95]

@PedroVeloso95 that makes sense, because the default initial position of the nodes depends on their order (arranged in a phyllotaxis). And their initial position will most likely have an arbitrary effect on the final layout.

The one other source of randomness in the system is if two nodes exactly overlap in coordinates and you have a collision force trying to separate them. In this case, a random direction is given for the repelling of the two nodes. But this is unlikely to happen, unless the nodes are initialized at 0,0.

Thank you for your help in understanding what causes it!

[PedroVeloso95]

@PedroVeloso95 In case it's useful to you, I also am trying to get consistent layouts. Once my layout fully settles, I save all the x, y values of the nodes, then when repopulating the graph later, I set the x, y values for each accordingly, but also set vx, vy for each node to 0. And this is working well for me so far!

Thank you!