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.
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.