每当我点击其中一个点时,它就会导致图表更新.只有在< nvd3>上有一个ngClick指令时才会发生这种情况. element(即使监听器函数什么都不做).如果我删除ngClick,一切都很好.
我正在使用带有angular-nvd3的非常基本的nvd3散点图.
什么可能导致这种奇怪的互动?
(此录制的帧率很低,因此很难看到,但每次点击都会重新绘制图表,包括顶部的图表)
这是一个再现问题的plunker:
http://plnkr.co/edit/F0ZslBaisoHWIp0VcI8o
谢谢!
更新我把它缩小到angular-nvd3内的手表.不知何故,ngClick的存在导致’数据’发生变化.
此行触发刷新:https://github.com/krispo/angular-nvd3/blob/master/dist/angular-nvd3.js#L328
我的代码中没有任何内容可以更改“数据”(也验证了对象是指令之外的相同实例),而且我在angular-nvd3.js中看不到任何可以改变数据的东西……嗯……
UPDATE
这是我的点击事件监听器(它是空的):
controller.handleChartClick = function(event) { };
和HTML:
<div class="col-sm-10"> <nvd3 ng-click="observationsCharts.handleChartClick($event)" options="observationsCharts.scatterPlotChartOptions" data="observationsCharts.scatterPlotChartData"></nvd3> </div>
解决方法
您是正确的,以下手表导致问题:
// Watching on data changing scope.$watch('data',function (newData,oldData) { if (newData !== oldData && scope.chart) { if (!scope._config.disabled && scope._config.autorefresh) { scope._config.refreshDataOnly && scope.chart.update ? scope.chart.update() : scope.api.refresh(); // if wanted to refresh data only,use chart.update method,otherwise use full refresh. } } },scope._config.deepWatchData);
问题是,如果您在此函数中添加日志以查看旧数据和新数据是什么,则数据实际上正在发生变化.
旧数据:
[{"key":"Battery Voltage","values":[{"x":1439419440000,"y":90,"series":0},{"x":1439419440000,"y":43,"y":345,{"x":1439167620000,"y":73,"y":42,"y":36,{"x":1440010740000,"y":32,"y":62,"series":0}]}]
新数据:
[{"key":"Battery Voltage","series":0,"color":"#1f77b4"},"series":0}],"color":"#1f77b4","value":90}]
每次单击新点时,颜色属性都会添加到对象中,因此watch函数实际上正在正常运行.