Seeking Advice On Clean Redraw

[manunamz]

Describe the bug
Possibly a bug, more likely I just need some help:

If I draw a force-graph multiple times, the graph simulation gets progressively sluggish after each call. This makes sense if you need to clear the canvas of prior data (d3 graphs using svg certainly require a clear/remove/delete before each redraw). I tried implementing a sort of clear() func for the canvas, but to no avail.

Am I missing the proper way to redraw graphs for this library, or is there another way?

To Reproduce
Call the draw scripts from any of the examples (I think) multiple times via, for example, a button click.

Here is a live example. If you open the 🧭 dropdown and click the 🕸 / 🌳 toggles rapidly you can re-create the behavior I'm describing.

Thanks 🙏

[vasturiano]

@manunamz thanks for reaching out.

Are you per chance instantiating the Graph object each time? That's what happens when you do:

const myGraph = ForceGraph()(domEl)

Each time you re-instantiate ForceGraph it creates a new reference in memory with all the graph data, so that could explain the progressive slow down, due to memory consumption. I would try to re-use a single reference and simply call component methods on it.

Alternatively, if you do need to instantiated each time, I would recommend to empty out the data structure in the existing graph instance before moving on. You can also call the myGraph._destructor() method for this purpose.

[manunamz]

Thank you much! Yes, I am instantiating the object each time -- I will give your suggestions a try and report back.

[manunamz]

👍