angularjs - 如何使用 angularjs-nvd3-directives 避免内存泄漏

Question

我正在开发一个 angularjs 应用程序，使用 angularjs-nvd3-directives 来渲染图表。

使用 Chrome 开发者工具检查后，我检测到一些与图表相关的内存泄漏。当用户浏览包含图表的不同 View 时，内存永远不会完全释放。

我已经在图形 Controller 上进行了一些清理:

$scope.$on('$destroy', function() {
  d3.select( '#exampleId' ).remove();
  d3.select( '#exampleId2' ).remove();
  ...
});

在routeChange事件上:

myApp.run(function($rootScope, $templateCache) {
  //try to clear unused objects to avoid huge memory usage
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (typeof(current) !== 'undefined'){
      //destroy all d3 svg graph
      d3.selectAll('svg').remove();
      nv.charts = {};
      nv.graphs = [];
      nv.logs = {};
    }
  });
});

当我从应用程序中删除图表时，内存使用量始终会回到初始值。

如图所示: 没有:

还有其他方法可以释放这些图表生成的内存吗？

jsfiddle来演示这个问题。

Answer 1

您可能忘记删除窗口调整大小监听器。

angularApp.run(function($rootScope) {
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (typeof(current) !== 'undefined'){
        //destroy d3 stuff 
        window.nv.charts = {};
        window.nv.graphs = [];
        window.nv.logs = {};

        // and remove listeers for onresize. 
        window.onresize = null;
    }
  });
}); 

您也可以尝试删除整个 svg 元素，但这似乎不是最好的方法。