DEV Community

Discussion on: Creating a Force Graph using React and D3

 
gilfink profile image
Gil Fink

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.

Thread Thread
 
danieltkach profile image
Daniel Tkach

Hey Gil! Ok, the question is HOW, how do I do that. Could you show me how to do it?

Thread Thread
 
gilfink profile image
Gil Fink

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.

Thread Thread
 
danieltkach profile image
Daniel Tkach

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.