Geek Answers Handbook

Using d3 transitions causes a memory leak

I did the visualization using d3.js. Visualization uses many transitions (for example, showing / hiding / moving elements). I noticed a high processor load and a significant increase in memory over time, making rendering very slow after a while.

So I deleted the transitions or replaced them with a home-made transition function with a lower frame rate. Unfortunately, removing all transitions is not an option, as this will render the visualization less presentable. The remaining transitions are circles that appear and disappear, increasing / decreasing the radius of the circle.

There was still a memory leak, mostly visible in chrome (20,000K in 10 minutes based on the Windows task manager).

So, I wondered if it could be that the transitions themselves are causing a memory leak. To test this, I did jsfiddle ( http://jsfiddle.net/qdwyoy7r/7/ ) to see if only one such transition shows the same results. And this happens: when launched in Chrome, the memory increases by about 9,500 K in 10 minutes (based on the Windows task manager).

g_svg = d3.select("#visualization") .append("svg") .attr("width", 300) .attr("height", 300); circle = g_svg.append("circle") .attr("cx", 150) .attr("cy", 150) .attr("r", 0) .style("opacity", 0.3) .style("fill", "orange"); resize(); function resize(){ circle.transition() .duration(500) .attr("r", 100) .transition() .delay(750) .duration(500) .attr("r", 0) var t = setTimeout(function(){resize()}, 1500); }

Is it possible that the d3 transitions themselves somehow increase memory usage? Or am I using d3 transitions incorrectly?

I look at Chrome dev tools, but this does not help me:

  • the graph shows the saw memory usage diagram (but the value that it decreases increases over time).
  • the heap timeline shows that basically objects (array) and (compiled code) increase in objects and retain the largest size. They also contain many elements when I expand them, but the elements shown in the profiler do not make sense to me.
  • In addition, bursts on the heap timeline (which are probably caused by the transition) become more and more high with time.
  • heap snapshots do not increase much, but when comparing objects selected between snapshots, I see the same (array) and (compiled code) ...
+1
javascript memory-leaks
source share
1 answer

This does not seem to be related to d3.js, but to chrome (38) on the windows. They performed the violin for more than an hour, and the memory usage in the Windows task manager was reduced from 56M to 133M. In another browser (for example, IE 10) the same fiddle does not rise, but balances around 37M.

0
source share

More articles:


All Articles