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

问题描述

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

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

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

  $ scope。$ on（'$ destroy'，function（）{
 d3.select（'#exampleId'）.remove（）; 
 d3.select（'＃exampleId2'）.remove（）; 
 ... 
}）; 
  

在routeChange事件中：

  myApp.run（function（$ rootScope，$ templateCache）{
 //尝试清除未使用的对象以避免大量内存使用
 $ rootScope。$ on（'$路由更新开始'，函数（事件，下一个，当前）{
 if（typeof（current）！=='undefined'）{
 //销毁所有d3 svg图
 d3.selectAll svg'）。remove（）; 
 nv.charts = {}; 
 nv.graphs = []; 
 nv.logs = {}; 
} 
 }）; 
}）; 
  

当我从我的应用程序中删除图表时，内存使用总是回到初始值。 / p>

使用图表：

Whithout：

是否有其他方法释放这些图表产生的内存？

正如我解释的那样，以下工作更好：

  $ rootScope。$ on （'$ stateChangeStart'，function（event，toState，toParams，fromState，fromParams）{
 angular.element（document.body.querySelectorAll（'。nvd3'））。 
  

这解决了SVG内存泄漏问题。但仍然在数据端（Array）有一些内存泄漏。

I'm working on an angularjs application using angularjs-nvd3-directives to render charts.

After a check with Chrome Developer Tools, I detected some memory leaks linked to the charts. When the user navigates through different views containing charts the memory is never fully released.

I'm already doing some cleanup on the graphs controllers:

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

And on the routeChange event:

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 = {};
    }
  });
});

When I remove the charts from my app, the memory usage always goes back to the initial value.

With the graph:Whithout:

Is there any other way to release memory generated by those charts ?

jsfiddle to demonstrate the issue.

解决方案

There is a similar issue at the github: https://github.com/cmaurer/angularjs-nvd3-directives/issues/193

As I explained there the following worked better:

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

This solves the SVG memory leaks. But still there are some memory leaks on the data side (Array).

这篇关于如何使用angularjs-nvd3-directives避免内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！