NVD3 - диаграмма перерисовывания/обновления, когда данные не меняются

Question

Я извлекаю данные из своего Диаграмма сервис. Данные, которые вытащили данные, имеют 2 свойства. Я хочу переключаться между ними по оси y (некоторые данные и некоторые другие данные). Идея заключается в том, что на основе события щелчка в моем родительском контроллере, диаграмма будет отображать различные свойства на моей оси у (или someData или someOtherData):

y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; } 

Это контроллер моей директивы. Приведенный ниже код будет делать только то, что я хочу, если я вновь получаю данные каждый раз, когда я хочу, чтобы переключаться между свойствами:

controller: function($scope, Chart) { 
     $scope.data = []; 
     $scope.data = Chart.testPortfolio(); // I only want data to be fetched once as it doesn't changes 

     $scope.update = function() { 
      //$scope.data = Chart.testPortfolio(); <-- if this line is uncommented it works, but I don't want to fetch data on every click event 
      $scope.pieOptions = { 
       chart: { 
        type: 'pieChart', 
        height: 400, 
        x: function(d){ return d.name; }, 
        y: function(d){ return $scope.mode === '1' ? d.someData : d.someOtherData; }, 
        showLabels: false, 
        labelThreshold: 0.01 
       } 
      }; 
     } 
     $scope.update(); 

     // this listens to my click event for switching 
     $scope.$on('some-event', function(e, args) { 
      $scope.mode = args.mode; 
      $scope.update(); 
     }); 
    } 

И это HTML директивы:

<nvd3 options='pieOptions' data='data'></nvd3> 

Как может Я перерисовываю/обновляю диаграмму, не переучивая данные каждый раз, когда я хочу переключать свойства для оси y?

Answer 1

Я придумал следующее решение, которое больше похоже на взлом hack. Поэтому, если у вас есть предложения, пожалуйста, дайте мне знать:

 controller: function($scope, Chart, $interval) { 
     $scope.data = []; 
     $scope.pieOpts = { 
      chart: { 
       type: 'pieChart', 
       height: 400, 
       x: function(d){ return d.name; }, 
       y: function(d){ return $scope.mode === '1' ? d.someValue: d.someOtherValue; }, 
       showLabels: false, 
       labelThreshold: 0.01 
      } 
     }; 

     $scope.data = Chart.testPortfolio(); 

     $scope.$on('some-event', function(e, args) { 
      if(args.mode !== $scope.mode) { 
       $scope.mode = args.mode; 

       var tempData = angular.copy($scope.data.reverse()); 

       $interval(function() { 
        $scope.data = []; 
        while((a=tempData.pop()) != null){ 
         $scope.data.push(a); 
        } 
       }, 1, true); 
      } 
     }); 
    }