Memory Leaks the way I am using d3-graphviz

Question

I am using the https://github.com/magjac/d3-graphviz installed through yarn , currently version d3-graphviz@3.1.0

I reuse the same div for many graphs, based on what is selected by the user. Currently, when I make a new graph, I call the destroy method on the old one and empty out the html of the div

if (FlowDot.dot_viewer) {
   FlowDot.dot_viewer.destroy();
   $('div.f-dot-area').html('');
}

FlowDot.dot_viewer = d3.select("div.f-dot-area").graphviz().renderDot(dot,() => {...});

But I keep loosing memory. And after a while the tab will consume too much (in the gigs)

What should I do to free resources ?

Edit/solution: The answer was that I was not turning off the events going to the graphs I destroyed. This meant the javascript still kept the destroyed in memory, even though I cleared out the html.

Once I unregistered all my event handlers, then destroyed the graph, there was no more memory issues

Answer 1

The answer was that I was adding event hooks to the graphs after I created them, but not turning off the events going to the graphs I destroyed. This meant the javascript still kept the destroyed in memory, even though I cleared out the html.

Once I unregistered all my event handlers, then destroyed the graph, there was no more memory issues