数据更新时如何更新 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

尝试应用方法，我认为它现在已更新，因为 $digest 在您的代码中不起作用。把你的代码包装起来

$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

Answer 2

您应该注意指令中的$scope.dataAcData 并更新

中的 D3

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