Graph looks different with same data

[vardhan-saniko]

Describe the bug A clear and concise description of what the bug is.

This is the issue I have raised in stack-overflow. https://stackoverflow.com/questions/72818388/react-d3-graph-renders-differently-for-same-data

I have a component that renders react D3 graph. And I have a switch that displays graph1 when its ON and displays graph2 when its OFF.

Basically there was react conditional rendering based on one variable state.

Issue is: graph1 is appearing differently. When component loads first time, it looks different. When switch is OFF(graph2) and then again ON(graph1), now it looks different. I prefer first graph.

Expected behavior Graph should look the same when there is exactly the same data

Screenshots

Environment:

• OS: [e.g. iOS] macOS
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22]
• Node version [e.g. 8.11.0]
• react-d3-graph version [e.g. 2.0.0-rc2] 2.6.0
• d3 version [e.g. 5.5.0] 5.16.0
• react version [e.g. 16.0.0] 18.1.0

[radhakpr]

Is it resolved?I am also facing same issue

[Sahilcf]

is it resolved ?

[vardhan-saniko]

No, it is not. I found it as a limitation of read-d3-graph. If the state changes and re-renders, the location of nodes are changing.

We should load the graph with a different key whenever re-rendering happens

Ex: