nvd3 application memory leak

Question

I have a living linechart that updates frequently, see http://jsfiddle.net/cddw17fg/5/

function redraw() {
  if (!redraw.isGraphShown) {
    redraw.isGraphShown = true;
    ...
  } else {
    d3.select('#chart svg')
      .datum(data)
      .transition().duration(1500)
      .call(chart);

    d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
      .attr('transform', function(d, i, j) {
      return 'translate (-40, 40) rotate(315)'
    });
    nv.tooltip.cleanup();
    chart.update();
  }
}

Running this js in IE11 with the "Development Tools" the "Total memory" increases slightly first, but after some minutes it starts growing fast.

After starting the jsfiddle the memory consumption looks 'good'... but after some minutes someone gets hungry and eats my bytes...

Anyone any clue about what I'm doing wrong?

Answer 1

I kept you fiddle running for 30 mins on one of the chrome tabs while i worked on something else and it crashed.

However if i keep the tab opened such that the tab never looses focus it never crashes and it keeps on working seamlessly.

Thus I am assuming that nvd3 does not update the graph but keeps all the update in a collection when the tab is in the blur state that's why the memory goes on increasing. Now when the focus is back on the tab it tries to render all the updates and screen freezes and eventually crashes.

Now as a fix:

I am using JQUERY to detect the window on focus:

$(window).focus(function() {
    window_focus = true;//set this flag on
}).blur(function() {
    window_focus = false;//set this flag off as window is not in display
});

Now inside your redraw function do chart update only when the window is in focus:

if(window_focus){
            chart.update();
            d3.select('#chart svg')
                .datum(data)
                //.transition().duration(1500)
                .call(chart);

            d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
                .attr('transform', function(d, i, j) {
                    return 'translate (-40, 40) rotate(315)'
                });
            nv.tooltip.cleanup();

        }

Working code here

Hope this helps!