データ更新時にD3グラフを更新する方法

Question

D3グラフを使用してデータを表示しています。データはWebApiから更新されます。データが更新されると、グラフのデータを更新したいと思います。ここ

はコード

$scope.config = { 
     title: 'Products', 
     tooltips: true, 
     labels: false, 
     mouseover: function() { }, 
     mouseout: function() { }, 
     click: function() { }, 
     legend: { 
      display: true, 
      //could be 'left, right' 
      position: 'right' 
     } 
    }; 


$http.put(WebApiURL.GetWebApiURL() + 'api/ReportPerformance', data) 
    .then(function (response) { 
     $scope.PerformanceData = response.data; 
     $scope.LoadingData = ""; 
     $scope.chartdata = []; 
     var tempchartdata = []; 
     angular.forEach($scope.PerformanceData, function (value) { 
      tempchartdata.push(value.ReportTimeInSeconds); 
     }); 
     $scope.chartdata = tempchartdata; 
    }), function errorCallback(x, y, z) { 
     $scope.LoadingData = "Error while generating report:= " + x.ExceptionMessage; 
    }; 
    } 

は、データ$scope.chartdataを更新し、このウェブコールです。

のhtmlでグラフの定義...

<div data-ac-chart="'bar'" 
    data-ac-data="chartdata" 
    data-ac-config="chartConfig" 
    style="height: 500px; width: 500px;" 
    class="chart"> 
</div> 

しかし、データがWEBAPIから来るとき、それは、$scope.chartdataを更新しているが、それは画面上に反映されていません。 $が機能していないダイジェスト、ので、私の事は、その今、更新、

を追加しましたplunker ... http://plnkr.co/edit/a0mVRL0Jo9ah8Om8ONTc

Answer 1

あなたのディレクティブで$scope.dataAcDataを見なければならないと法を適用してみ

scope.$watch('dataAcData',function(){ 
    //update your d3 here 
}) 

Answer 2

にD3を更新しますあなたのコードで。あなたのコードをラップする

$scope.$apply(function() { 
      //your code 
     }); 




$scope.$apply(function() { 
      $scope.dataAcData 
     }); 

go through http://jimhoskins.com/2012/12/17/angularjs-and-apply.html link, Hope it will help you