D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
explunit
Full window
Github gist
Memory leak test with add/remove of svg circles
Memory leak test with add/remove of svg circles. Appears to leak on IE9 and IE10.
<!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'); node.id = 'id' + Math.random(); 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>