如何根据d3.js中实时收到的数据添加一行?

时间:2017-10-17 00:43:15

标签: javascript d3.js

在阅读这个问题之前,你应该知道我曾经问了一个类似的问题,但是根据这个社区的建议,我被要求再做一次更具体的问题。

我有7个传感器,每个传感器由一个单选按钮代表。在我的实际项目中,我不断收到网络服务,并为每个传感器制作过滤器。用户只对通过传感器查看信息感兴趣。我使用setinterval模拟Web服务这是我可以接收的Web服务结构的示例。不要担心规模或价值观。第三个数据中的值400(数据2)成为峰值,是此测试的虚拟值。

[{"id":"sensor1_ciclo1","sensor":1,"ciclo":"ciclo1","values":
 [
  {"voltaje":0,"corriente":11.175}
 ]

oData是我的webservice的模拟.. oData [0],oData 1和oData 2

cont=0;
intervalo=setInterval(function(){
 if(cont<=2){
  reloadPoints(oData[cont]);
  cont++;
 }
},3000)

"sensor"键表示传感器编号。我有7个输入无线电来代表每个传感器。键&#34; ciclo&#34;,是传感器的属性。我可以过滤这个属性。虽然在这种情况下,我的所有数据都使用"ciclo": "ciclo1"。在折线图中,我使用键"corriente""voltaje"绘制点。

在我的真实项目中,我根据一段时间获取数据,对于这种情况,我使用setInterval 3秒来模拟它们。我想用动画绘制与所选传感器对应的数据。如果选择了sensor1,我只想放入sensor1数据。

如果我更换传感器,我希望看到已经积累的数据,这是我的函数reloadPoints的主要功能,累计值在oDataSensoresdisplay函数负责绘制数据,如果y轴上的限制大于250或-250,则重新调整图表。

enter image description here

我不知道如何修复它。最奇怪的是,如果我评论这一行,

 Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
它显然有效。但我需要通过传感器累积值,所以我不能删除这一行。我该如何解决?

要重现错误,请等待9秒,并且当添加sensor1中的第三行并重新调整图表(&gt; 250)时,会出现此问题。

请看gif。

enter image description here

我不知道如何修复它。最奇怪的是,如果我评论这一行,

 Array.prototype.push.apply(oDataSensores[data[i].id].content.values, data[i].values);
它显然有效。但我需要通过传感器累积值,所以我不能删除这一行。我该如何解决?

第二次点击传感器1,不正确..

要重现错误,请等待9秒,并且当添加sensor1中的第三行并重新调整图表(&gt; 250)时,会出现此问题。

添加新点时我想要实现的过程

enter image description here

这是我的代码:

http://plnkr.co/edit/z5It4hiOy3i7YOE5phnd?p=preview

让你了解我的一点项目。我有7个传感器。我会经常使用我的数据结构来使用Web服务。每次他们要为每个传感器绘制线条时,根据属性&#34; ciclo&#34; (在这种情况下,所有都是&#34; ciclo1&#34;)。当我获取数据并实时显示时,我可以更改传感器以显示到那时累积的数据。

0 个答案:

没有答案