Sorry for the late response. In the force graph container you can add to the React.useEffect that runs the force graph creation any dependency in it's dependency array. If something changes in one of the dependencies the effect will run again and will re-render the graph.
Hey Gil, thanks for the awesome article. What this is doing for me is creating a new graph inside the same container, just below the other one... any ideas? This is really puzzling. I appreciate your help very much.
Hi @danieltkach
Thanks for reading. It isn't puzzling but rather the expected behavior. Since the runForceGraph inner code selects the container and adds to it all the relevant underline SVG parts for the force graph. You can clean/clear the content of the container when the effects run to make sure things aren't recreated again.
Let me know if the answer helped you.
Look for the following line in the runForceGraph:
const containerRect = container.getBoundingClientRect();
Add before that line something like:
container.innerHTML = '';
Another option is to clean/clear the container in the useEffect of the containing component.
Thanks for reading.
Sorry for the late response. In the force graph container you can add to the React.useEffect that runs the force graph creation any dependency in it's dependency array. If something changes in one of the dependencies the effect will run again and will re-render the graph.
Hi Gil, any updates on this?
Hey Gil, thanks for the awesome article. What this is doing for me is creating a new graph inside the same container, just below the other one... any ideas? This is really puzzling. I appreciate your help very much.
Hi @danieltkach
Thanks for reading. It isn't puzzling but rather the expected behavior. Since the runForceGraph inner code selects the container and adds to it all the relevant underline SVG parts for the force graph. You can clean/clear the content of the container when the effects run to make sure things aren't recreated again.
Let me know if the answer helped you.
Hey Gil! Ok, the question is HOW, how do I do that. Could you show me how to do it?
Look for the following line in the runForceGraph:
const containerRect = container.getBoundingClientRect();
Add before that line something like:
container.innerHTML = '';
Another option is to clean/clear the container in the useEffect of the containing component.
container.innerHTML = '';
did not work.
How do you clear that container, like the second option you described?
Having the graph react to data change is very important for me.
Thanks.