score:0

Accepted answer

it seems to be a bug in nvd3 or d3 itself. my workaround for now is to reload the page with the diagram every 10 min.

var startdatenvd3reload = date.now();
...
var elapsed_time_minutes = (date.now() - startdatenvd3reload)/1000/60;
if (elapsed_time_minutes > 10)
{
    location.reload(true);
}

score:2

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!


Related Query