Angular nvd3 sunburst不会随$scope.data的更改而更新

Angular nvd3 sunburst does not update with $scope.data change

本文关键字：data 更新 scope sunburst nvd3 Angular      更新时间：2023-09-26

用例：当api中的数据发生变化时，$scope.data也会发生变化。我可以在html中看到数据的变化。预计会更新太阳爆发图。

这是核心代码：

控制器：

var grabData=function(){
  $http.get('someApi').then(function success(response){
  $scope.options = {
        chart: {
            type: 'sunburstChart',
            width:450,
            height: 450,
            color: d3.scale.category20c(),
            duration: 250,
            mode: 'size',
            useInteractiveGuideline:true,
        }
    };
    $scope.config = {
        visible: true, // default: true
        disabled: false, // default: false
        refreshDataOnly: true, // default: true
        deepWatchOptions: true, // default: true
        deepWatchData: true, // default: true
        deepWatchDataDepth: 2, // default: 2
        debounce: 10 // default: 10
    };
        $scope.data = [];
        $scope.data.push({"name":"PORTFOLIO", "children":response.data});
    },function error(response){
      $scope.all = response.statusText;
  });};

HTML:

<div class="col-md-6 col-md-offset-1">
  <nvd3 options="options" data="data" config="config" class="with-3d-shadow with-transitions"></nvd3>
</div>

问题：现在，当api中的数据发生变化时，$scope.data也会发生变化。我可以在html中看到数据的变化。但是，在我手动刷新页面之前，sunburst图表根本不会更新。

所以修复非常简单，您必须传递refreshDataOnly:false。

配置中的config="{refreshDataOnly: false}"-

<nvd3 options="options" data="sunburst" config="{refreshDataOnly: false}" class="with-3d-shadow with-transitions"></nvd3>

相关文章：