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