2015-12-22 51 views
12

Mam Linechart dziennym, który aktualizuje się często, patrz http://jsfiddle.net/cddw17fg/5/nvd3 pamięci aplikacji wyciek

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 to JS w IE11 z „development tools” Karta „Memory Razem” wzrasta nieznacznie, ale po kilku minutach szybko się rozwija.

Po uruchomieniu jsfiddle wygląd zużycie pamięci „dobre” ... after startup ale po kilku minutach ktoś dostaje głodny i zjada moje bajtów ... starting to eat memory

Każdy, każdy trop o tym, co robię źle?

+1

Próbowałem z najnowszej wersji 1.8.1 na http://jsfiddle.net/3va0m0e4/2/, wygląda jak ten sam problem pojawia się w chromie –

Odpowiedz

1

Utrzymywałem cię przez 30 minut na jednym z chromowanych zakładek, podczas gdy ja pracowałem nad czymś innym i rozbił się.

Jeśli jednak przytrzymam kartę otwartą w taki sposób, że zakładka nigdy nie straci ostrości, nigdy się nie zawiesza i działa płynnie.

W ten sposób zakładam, że nvd3 nie aktualizuje wykresu, ale zachowuje całą aktualizację w kolekcji, gdy karta jest w stanie rozmycia, dlatego pamięć rośnie. Teraz, gdy fokus powraca na zakładkę, próbuje renderować wszystkie aktualizacje, a ekran się zawiesza i ostatecznie ulega awarii.

Teraz jako Fix:

używam jQuery wykryć okno na ostrości:

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

Teraz wewnątrz redraw function zrobić aktualizację wykresu tylko wtedy, gdy okno jest w centrum uwagi:

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

     } 

Kod roboczy here

Mam nadzieję, że to pomoże!

+0

Próbowałem tylko swoją jsfiddle użyciu IE11 i wyniosła 3,6 GB pamięci Całkowity po 15 minutach - ciągle rośnie ... W tym czasie wykres został ukryty przez inną kartę. (Niestety nie mogę dodać zrzutu ekranu do tego komentarza) – Mario

+0

OK, niestety nie mam IE ... więc możesz sprawdzić w konsoli, czy możesz zobaczyć "Nie dzwonił", gdy uruchomisz ten http://jsfiddle.net/y3d5wdof/1/i zmień fokus na inną zakładkę. – Cyril

+0

Przepraszam, spróbuj tego skrzypka http://jsfiddle.net/cyril123/y3d5wdof/3/ i sprawdź, czy to działa! – Cyril

0

Wydaje się, że jest to błąd w samym NVD3 lub D3. Moje obejście na razie polega na przeładowaniu strony ze schematem co 10 minut.

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