javascript - multibarchart - nvd3 piechart

fuga de memoria de aplicación nvd3

Question

Tengo un gráfico de líneas vivo que se actualiza con frecuencia, consulte 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();
  }
}

Al ejecutar este js en IE11 con las "Herramientas de desarrollo", la "Memoria total" aumenta ligeramente primero, pero después de algunos minutos comienza a crecer rápidamente.

Después de iniciar jsfiddle, el consumo de memoria se ve "bien" ... pero después de algunos minutos alguien tiene hambre y come mis bytes ...

¿Alguien tiene alguna pista sobre lo que estoy haciendo mal?

Answer 1

Te mantuve jugando durante 30 minutos en una de las pestañas de Chrome mientras trabajaba en otra cosa y se colgó.

Sin embargo, si mantengo la pestaña abierta de modo que la pestaña nunca pierda el foco, nunca se bloquea y sigue funcionando sin problemas.

Por lo tanto, supongo que nvd3 no actualiza el gráfico, sino que mantiene toda la actualización en una colección cuando la pestaña está en estado borroso, por lo que la memoria continúa aumentando. Ahora, cuando el foco vuelve a la pestaña, intenta mostrar todas las actualizaciones y la pantalla se congela y, finalmente, se cuelga.

Ahora como una solución:

Estoy usando JQUERY para detectar la ventana en el foco:

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

Ahora dentro de su redraw function , actualice el diagrama solo cuando la ventana esté enfocada:

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

        }

Código de trabajo aquí

¡Espero que esto ayude!

Answer 2

Parece ser un error en NVD3 o D3. Mi solución por el momento es volver a cargar la página con el diagrama cada 10 minutos.

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