Angular-nvD3 根据数据更改调整图表大小答案

【问题标题】：Angular-nvD3 resizes chart on data changeAngular-nvD3 根据数据更改调整图表大小
【发布时间】：2015-12-03 11:48:42
【问题描述】：

我正在使用Angular-nvD3。我有一个简单的图表，如下所示：

HTML：

<nvd3 options="options" data="data"></nvd3>

JS：

$scope.options = {
        chart: {
            type: 'pieChart',
            height: 450,
            x: function (d) { return d.key; },
            y: function (d) { return d.y; },
            showLabels: true,
            duration: 1100,
            showLegend: false
        }
    };

我的 data 对象只是一个具有 key 和 y 属性的简单对象数组。在某些 DOM 事件中，我从服务器更新数据并更改 data 对象。当我这样做时，我的图表会调整大小。

为什么会发生这种情况，我该如何预防？

更新：

// This is the function that is called on the DOM event.
var loadAllData = function () {
    var result = getData();

    result.$promise.then(function (returnedAmounts) {
        loadChartsData(returnedAmounts.expenses, $scope.data);
    }, function (error) {
        // Error.
    });
}

var loadChartsData = function (group, chartsData) {
    // Iterate over the group
    for (var i = 0; i < group.length; i++) {
        chartsData[i] = {
            key: group[i].name || group[i].key,
            y: group[i].amount
        };
    }
}

【问题讨论】：

奇怪了，能查一下this example
它并没有真正复制我的情况。我会更新我的问题，以便您理解。
您使用什么版本？您是否尝试在数据加载后通过 api 手动更新/刷新图表？

标签： javascript angularjs d3.js nvd3.js angular-nvd3

【解决方案1】：

尝试设置你的 config.deepWatchData = false，这样图表只会在你告诉它时更新。（通过使用 api.refresh）

【讨论】：