nvd3 Anwendung eines Speicherleck

Question

ich einen lebenden Liniendiagramm, die häufig aktualisiert, leicht ersten 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(); 
    } 
} 

Ausführen dieses js in IE11 mit den „Development Tool“ der „Gesamtspeicher“ erhöht, aber nach einigen Minuten ist es beginnt schnell zu wachsen.

Nach dem jsfiddle Start des Speicherverbrauch sieht ‚gut‘ ... aber nach einigen Minuten jemand Hunger bekommt und esse mein Bytes ...

Wer jede Ahnung, was ich tue falsch?

Answer 1

Ich hielt Sie Geige für 30 Minuten auf einem der Chrom Tabs laufen, während ich an etwas anderem arbeitete und es stürzte.

Allerdings, wenn ich die Registerkarte geöffnet, so dass die Registerkarte nie Fokus verliert es nie abstürzt und es funktioniert nahtlos weiter.

Also gehe ich davon aus, dass nvd3 das Diagramm nicht aktualisiert, sondern das gesamte Update in einer Sammlung behält, wenn sich der Tab im Unschärfebedingnis befindet, weshalb der Speicher weiter ansteigt. Jetzt, wenn der Fokus wieder auf der Registerkarte ist, versucht es alle Aktualisierungen zu rendern und der Bildschirm bleibt stehen und stürzt schließlich ab.

Jetzt als fix:

ich JQUERY bin mit dem Fenster auf Fokus erkennen:

$(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 
}); 

Jetzt in Ihrem redraw function nur Chart-Update tun, wenn das Fenster im Fokus ist:

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(); 

     } 

Arbeits Code here

Hoffe das hilft!

Answer 2

Es scheint ein Fehler in NVD3 oder D3 selbst zu sein. Meine Abhilfe besteht jetzt darin, die Seite mit dem Diagramm alle 10 Minuten neu zu laden.

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