D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
explunit
Full window
Github gist
Memory leak test with repeating node IDs
Using null IDs or ensuring that they repeat across iterations seems to stop the IE leak.
<!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <html> <body> <script type="text/javascript"> var count = 1000; var svg = document.createElementNS("https://www.w3.org/2000/svg", "svg"); svg.setAttribute('width', '800'); svg.setAttribute('height', '800'); document.body.appendChild(svg); function update() { // remove existing circles var circles = svg.querySelectorAll("circle") for (var i = circles.length - 1; i >= 0; i--) { var parent = circles[i].parentNode; if (parent) parent.removeChild(circles[i]); }; // add new ones. Yes, would make more sense to update the x,y on the existing // circles but this is to show what happens in IE with lots of nodes being added/removed for (var j = count - 1; j >= 0; j--) { var node = document.createElementNS("https://www.w3.org/2000/svg", 'circle'); // ensure that the IDs repeat across iterations. Null would also work here node.id = 'id' + j; node.setAttributeNS(null, "cx", Math.random()*800); node.setAttributeNS(null, "cy", Math.random()*800); node.setAttributeNS(null, "r", 5); node.setAttributeNS(null, "fill", "blue"); svg.appendChild(node); }; } setInterval(update, 1000); </script> </body> </html>