Angular-nvd3问题,在将数据设置为newData

时间:2015-06-07 12:51:08

标签: angularjs angularjs-directive angularjs-nvd3-directives

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

任何评论都是预先准备的!

2 个答案:

答案 0 :(得分:3)

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

初始数据数组像标准d3可视化一样绑定到DOM,并保存对它的引用。当您在指令中修改数组时,它会触发重绘,因为它是相同的数组(对它的引用),绑定的数据会被更改,并且绘图会正常重绘。

当您在第一次绘制后更改数组时,在引擎盖下,仍然数据绑定的数组是初始数组(没有数据的数组)。该指令仍会触发重新绘制,但没有数据。

要执行您想要的操作,而不是通过以下方式调用$scope.$apply();获取api $scope

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

然后使用:

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

更新了example

答案 1 :(得分:2)

版本1.0.2 以来,您可能还想将true设置为15/09/2015scope.api.refresh()上有一个提交,现在默认情况下此选项为false,这意味着Angular的监视表达式不会跟踪数据中数组的更改。

无需使用此设置执行<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>

应该是: n