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

Question

我正在开发一个使用 angularjs-nvd3-directives 来呈现图表的 angularjs 应用程序。

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

我已经对图形控制器进行了一些清理工作：

$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

github上有类似问题：https://github.com/cmaurer/angularjs-nvd3-directives/issues/193

正如我在那里解释的那样，以下效果更好：

  $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
angular.element(document.body.querySelectorAll('.nvd3')).remove();

这解决了 SVG 内存泄漏问题。但是在数据端（数组）还是有一些内存泄漏。

Answer 2

我建议您将图表移动到您的自己的指令，这些指令将在其模板上保存 nvd3 指令并监听每个指令的范围。

$destroy 也销毁此事件中的元素。

控制器应检索数据并将其分配给指令。

您可能想收听指令上的$routeChangeStart，因此清理将封装在使用数据的部分。这样可以避免重复代码。

我使用这种技术来清理使用模态的指令，因此我没有重复的事件侦听器或 id。

Answer 3

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

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 元素，但这似乎不是最好的方法。