Using d3 transitions causes memory leak

Question

I made a visualization with the help of d3.js. The visualization makes use of a lot of transitions (e.g. showing/hiding/moving elements). I noticed a high CPU load and a large increase in memory over time, making the visualization very slow after a while.

I therefore removed transitions, or replaced them with a self-made transition function with a slower frame-rate. Unfortunately, removing all transitions is not an option as this would make the visualization less presentable. The remaining transitions are circles that are appearing and disappearing by increasing/decreasing the circle radius.

Still there seemed to be 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 made a jsfiddle (http://jsfiddle.net/qdwyoy7r/7/) to see whether a single similar transition alone would show the same results. And it does: When run in Chrome, the memory increases around 9,500 K per 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 are somehow increasing the memory usage? Or am I using the d3 transitions in a wrong way?

I have been looking at the Chrome dev tools but it is not really helping me:

• the timeline shows the saw-tooth pattern of memory usage (but the value it goes down to increases over time)
• the heap timeline shows that mostly (array) and (compiled code) are increasing in objects and have retained the most size. They also contain a lot of items when I unfold them, but the items shown in the profiler do not make sense to me.
• Also, the spikes on the heap timeline (that are likely caused by the transition), are getting increasingly higher over time.
• the heap snapshots do not increase in size much but when comparing objects allocated between snapshots I see the same (array) and (compiled code)...

Answer 1

This seems not related to d3.js but to chrome (38) on windows. Have been running the fiddle for more than an hour and the memory usage measured in the windows task manager has gone from 56M to 133M. On another browser (for example IE 10) the same fiddle does not go up but balances around 37M.