react-d3-graph icon indicating copy to clipboard operation
react-d3-graph copied to clipboard

Nodes are not loading in correct position

Open radhakpr opened this issue 2 years ago • 9 comments

@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

radhakpr avatar Dec 15 '22 13:12 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?

fortune-cook1e avatar Dec 15 '22 15:12 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

radhakpr avatar Dec 15 '22 15:12 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 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?

fortune-cook1e avatar Dec 16 '22 05:12 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 Expectation

radhakpr avatar Dec 16 '22 05:12 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 Expectation

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

fortune-cook1e avatar Dec 16 '22 06:12 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 Expectation

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

radhakpr avatar Dec 16 '22 09:12 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 Expectation

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.

fortune-cook1e avatar Dec 16 '22 09:12 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 Expectation

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([]); <Graph id="graphid" data={data} config={CONFIG} onClickNode={onClickNode} onClickLink={onClickLink} ref={ref} />

radhakpr avatar Dec 16 '22 12:12 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 Expectation

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.

fortune-cook1e avatar Dec 16 '22 14:12 fortune-cook1e