score:19
i think you have your answer already but i was interested in how you show that this is true, at least in latest chrome.
this is the section of the d3 code that removes dom nodes:
function remove() {
var parent = this.parentnode;
if (parent) parent.removechild(this);
}
export default function() {
return this.each(remove);
}
so as you can see it's depending on the browser to do cleanup of any associated listeners.
i created a simple stress test of adding/removing lots of circle nodes with d3:
var circles = svg.selectall("circle")
.data(data, function(d) { return d.id; } );
circles.exit().remove();
circles.enter().append("circle")
.attr("id", function(d) { return d.id; })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr( { r: 5, fill: 'blue' })
.on("mouseenter", function(d) { console.log('mouse enter') });
live version here: http://bl.ocks.org/explunit/6413685
- open the above with latest chrome
- open the developer tools
- click the timeline tab
- click the record button at the bottom
- let it run for a couple minutes, then click the button again to stop recording
- drag the selector in the top timeline view to cover several of the garbage collection sawtooth patterns
you will notice that the dom node garbage collection counts correspond with the event listener garbage collection counts. in fact, you can't really tell them apart in the below screenshot since the lines are superimposed:
note that for internet explorer, things are a little more complicated.
see also this article for more tips on tracking memory usage in chrome tools.
Source: stackoverflow.com
Related Query
- d3.js should I detach event listener on exit/remove?
- Remove event listener with d3js not working
- How to remove event listener of an element when I remove the corresponding element in the midst of the event being triggered in D3?
- D3.js v4: Access current DOM element in ES6 arrow function event listener
- Javascript event listener for SVG transform
- Add event listener per nodes level on d3 chart
- d3 remove data using exit
- d3 js drag event listener isnt getting the event - (d3, react)
- How to remove the onmouseout event after having assigned a function?
- How to remove d3.behavior.drag().on("drag",...) event handler
- how to pass variables to event listener method in d3
- Why does event listener callback function only work inside function scope?
- Get value of input element in event listener with d3
- Removing event listener that invokes an event listener
- D3 Invert Selection From Event Listener (this)
- D3 remove parents of elements returned by exit
- On click of parent node in tree layout, Like link and node, linkText should also exit
- D3 exit transition: animation translate to left before remove
- D3 anywhere outside graph event listener
- Adding keyboard event listener to svg div container
- D3.js mouseover event should reach also the inner area of the circle
- Adding an event listener to a d3 brush
- Datamaps: how to show popup on mouseover AND customize the mouseover event listener
- Adding second click event listener within a click event listener
- D3.js Dc.js Binding Event listener to axis tick label
- Add event listener of a method present in another js file
- d3 exit transition: how to flatten path and then remove
- Stop div's childNodes from responding to div's event listener
- How can I remove drag event on one element in a draggable group?
- modify circle elements by event listener on text matching id of circle
More Query from same tag
- Legend in deck.gl
- Getting Screen Positions of D3 Nodes After Transform
- set maximum value for c3js scatter chart plot size
- d3.js CSV to HTML Table - Header, Average & chart
- Vertical alignment between an SVG rect and SVG text using D3 and javascript
- How to avoid overlapping tooltips of multi-series line chart d3.js
- ASP.NET vs creating/opening .HTML file in C#
- Calling d3.mouse on svg.node() after a timeout
- IOS app webview SVG ClipPath Issue
- D3: pie labels with "horizontal ending"-lines without overlapping
- D3 Stacked bar chart with different stack level
- D3 Scaling issue of Graph with appropriate scaling of Scales(Y-axis,X-axis)
- Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?
- D3 Bar Chart with Tooltip on X-Axis
- D3JS Force network: Links to nodes that are grouped using formula in transform fnt
- How to get element on mouse position within d3.xhr and async queue?
- Reconnect links on force graph
- D3 plus wrapping text in circles
- Understanding and rebuilding overload of a dataframe to d3 format
- d3.js force-directed graph maintain constant link distances
- How to get a path centroid d3
- My DOM element already has some divs. Can I use D3 to add more?
- d3.js date time format specifier not working as expected
- typescript line chart d3
- D3 pie chart not updating
- D3 Alternate Calendar - Coloring by Bin
- Appending lines to D3 bar chart - absolutely nothing happens
- Horizontal fade-in transition from side to side using d3?
- d3 scaleBy from the left instead of the center
- Responsive sizing of my chart in dimple.js is not working