Nodes are not loading in correct position

[radhakpr]

@danielcaldas I am trying the load the graph but each time the animation is lost .
I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel
It doesnt appear as cluster instead the nodes are appearing in different places

[fortune-cook1e]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

[radhakpr]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

[fortune-cook1e]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

[radhakpr]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position.
I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

[fortune-cook1e]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position. I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

Could you show me your code? Maybe it's a better way to find problems

[radhakpr]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position. I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

Could you show me your code? Maybe it's a better way to find problems

I wont be able to share the code.
I give one example of it
https://codesandbox.io/s/react-d3-graph-demo-forked-d3oq0r
https://codesandbox.io/s/react-d3-graph-nodes-position-reset-dezzs

[fortune-cook1e]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position. I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

Could you show me your code? Maybe it's a better way to find problems

I wont be able to share the code. I give one example of it https://codesandbox.io/s/react-d3-graph-demo-forked-d3oq0r https://codesandbox.io/s/react-d3-graph-nodes-position-reset-dezzs

You can open this sandbox link. https://codesandbox.io/s/react-d3-graph-nodes-position-reset-forked-u85zuu?file=/src/App.js
I just replace handleRefChange with React.useRef and it can make you graph look like cluster.
And I don't know the reason for why each node appears in different position when data updates, maybe I need some time to find.

[radhakpr]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position. I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

Could you show me your code? Maybe it's a better way to find problems

I wont be able to share the code. I give one example of it https://codesandbox.io/s/react-d3-graph-demo-forked-d3oq0r https://codesandbox.io/s/react-d3-graph-nodes-position-reset-dezzs

You can open this sandbox link. https://codesandbox.io/s/react-d3-graph-nodes-position-reset-forked-u85zuu?file=/src/App.js I just replace handleRefChange with React.useRef and it can make you graph look like cluster. And I don't know the reason for why each node appears in different position when data updates, maybe I need some time to find.

ok still the same behavior.

if we assign the data to a state is that causing issue?
const [data, setData] = useState([]);

[fortune-cook1e]

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesnt appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

@danielcaldas I am trying the load the graph but each time the animation is lost . I am using this https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel It doesn't appear as cluster instead the nodes are appearing in different places

Could you give an example on Sandbox?

when the data changes it is loading in different positions. It is not loading like clusters instead it is appearing very far

Does the shape look like a circle?

no it looks scattered .Each time when it is loading it takes different position. I am expecting looking like cluster as in the below example.But it doesnt appear when there is dynamic data

Could you show me your code? Maybe it's a better way to find problems

I wont be able to share the code. I give one example of it https://codesandbox.io/s/react-d3-graph-demo-forked-d3oq0r https://codesandbox.io/s/react-d3-graph-nodes-position-reset-dezzs

You can open this sandbox link. https://codesandbox.io/s/react-d3-graph-nodes-position-reset-forked-u85zuu?file=/src/App.js I just replace handleRefChange with React.useRef and it can make you graph look like cluster. And I don't know the reason for why each node appears in different position when data updates, maybe I need some time to find.

ok still the same behavior.

if we assign the data to a state is that causing issue? const [data, setData] = useState([]);

Maybe it is because of useState. You can check my new node below the link.
https://codesandbox.io/s/react-d3-graph-nodes-position-reset-forked-u85zuu?file=/src/App.js
This time I add a key on the root container, when graph data is ready, I'm gonna to update key to force the component to render again, then it looks normal.