1

这是一个奇怪的问题，不仅关于nvd3 directive，我已经进入指令源代码，但仍然找不到原因。
我把它放在plunker中，在app.js中切换注释第 34 行和第 35 行会显示问题。
如果我在 $scope.data 中设置一个新值，图表运行良好，但如果我设置一个 newData，图表将无法运行。
我已经调试了 angular-nvd3 指令，当我更改整个数据对象时，$watch('data') （angular-nvd3.js 第 320 行）仍然有效，但 scope.chart.update() 无法正常工作. 我没有发现 nvd3.js 保存图表数据的任何地方，所以我真的不知道发生了什么，为什么不工作....

任何评论将是一个preciate！

4

2 回答 2

3

我相信这是 nvd3 如何使用 d3 数据绑定的一个怪癖。

初始数据数组像标准 d3 可视化一样绑定到 DOM 并保存对它的引用。当您修改指令中的数组时，它会触发重绘，并且由于它是同一个数组（引用它），因此绑定数据会更改并且绘图会正常重绘。

当您在第一次绘制后更改数组时，在后台，仍然数据绑定的数组是初始数组（没有数据的数组）。该指令仍会触发重新绘制但没有数据。

做你想做的事，而不是调用$scope.$apply();get apiinto the $scopewith：

<nvd3 options="options" data="data" api="api" config="{refreshDataOnly: true}"> </nvd3>

然后使用：

$scope.api.updateWithData($scope.data);

更新示例。

于 2015-06-07T15:53:06.507 回答
2

从1.0.2 版本开始，您可能还想设置deepWatchData为true. 有一个提交15/09/2015，现在这个选项默认为 false，这意味着 Angular 的 watch 表达式不会跟踪数组中的数据变化。

无需进行scope.api.refresh()此设置。无需重写整个数据数组，只需将新数据部分添加/推送到数组即可。这将有助于在重新分配新数据时防止闪烁。

现在代替： <nvd3 options="options" data="data" class="with-3d-shadow with-transitions" config="{refreshDataOnly: true}"></nvd3>

应该： <nvd3 options="options" data="data" class="with-3d-shadow with-transitions" config="{refreshDataOnly: true, deepWatchData: true}"></nvd3>

于 2015-10-06T06:31:33.323 回答