本文介绍了在运行时更改折线图的域的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的代码中,我正在加载900多个数据的JSON。这些数据代表某些机器发出的数据。我正在绘制一个折线图,此JSON中的键代表机器的名称。



这是我的JSON的结构:



{ AF3:3605.1496928113393 , AF4:-6000.4375230516, F3:1700.3827875419374, F4:4822.544985821321, F7:4903.330735023786, F8:824.4048714773611, FC5:3259.4071092472655, FC6:4248.067359141752, O1:3714.5106599153364 O2:697.2904723891061, P7:522.7300768483767, P8:4050.79490288753, T7:2939.896657485737, T8:9.551935316881588}



每行代表每台机器,我在空格处分别查看每台机器。我目前正在借助称为 cont 的计数器读取数据。 JSON中的所有数据都在 0 5000 之间。但是我修改了JSON的某些对象以实现更改域,然后对于所有行,新域通常必须等于更改。



例如,在JSON的第106行上,为 AF3:7000 。 (在这种情况下,所有行的域都应为[0-7000])



在第300行中, AF4:-1000 。(在这种情况下,所有行的域都应为[-1000,7000])



我故意修改了一些数据以实现这一改变。我希望所有行都可以通过动画更新到这个新域。



我该怎么办?



这是我的代码:



解决方案

要更新所有折线图中的域,我们需要在输入新数据之前重新计算域。 / p>

柱塞:

  var newDomain = d3.extent(ids.map(function( d){
return aData [cont] [d]
}));
var oldDomain = y.domain()
newDomain [0] = newDomain [0]< oldDomain [0]? newDomain [0]:oldDomain [0]
newDomain [1] = newDomain [1]> oldDomain [1]? newDomain [1]:oldDomain [1]
y.domain(newDomain)
domain.text(y.domain())

关于修剪图形,需要在1ms内处理数据(在您的情况下为14个数组,对数组进行推入和移位操作以及D3转换)还不够。不幸的是,我没有任何资源可以备份此文件。如果有人可以编辑此答案以提供证据,请放心。


In my code I am loading a JSON of more than 900 data. these data represent the data emitted by some machines. I'm drawing a line chart, the keys in this JSON represent the name of the machines.

This is the structure of my JSON:

{"AF3":3605.1496928113393,"AF4":-6000.4375230516,"F3":1700.3827875419374,"F4":4822.544985821321,"F7":4903.330735023786,"F8":824.4048714773611,"FC5":3259.4071092472655,"FC6":4248.067359141752,"O1":3714.5106599153364,"O2":697.2904723891061,"P7":522.7300768483767,"P8":4050.79490288753,"T7":2939.896657485737,"T8":9.551935316881588}

each line represents each machine and I put a space to see each machine separately. I am currently reading the data with the help of an counter called cont. all the data in the JSON is between 0 to 5000. But I have modified some objects of the JSON to achieve change the domain and then the new domain in general for all the lines must be equal to the change.

for example on line 106 of the JSON to "AF3":7000. (in this case the domain should be [0-7000] for all the lines)

in the line 300, "AF4": - 1000.(in this case the domain should be [-1000,7000] for all the lines)

I have modified some data on purpose to achieve this change. I would like all lines to be updated to this new domain, if possible with an animation.

How can I do it?

this is my code:

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

解决方案

To update domain across all line charts, we need to recalculate the domain before new data gets pushed in.

Plunker: http://plnkr.co/edit/AHWVM3HT7TDAiINFRlN9?p=preview

var newDomain = d3.extent(ids.map(function(d) {
  return aData[cont][d]
}));
var oldDomain = y.domain()
newDomain[0] = newDomain[0] < oldDomain[0] ? newDomain[0] : oldDomain[0]
newDomain[1] = newDomain[1] > oldDomain[1] ? newDomain[1] : oldDomain[1]
y.domain(newDomain)
domain.text(y.domain())

With respect to graph getting trimmed, data needs to be manipulated ( In your case, 14 arrays, push and shift operation to the array and D3 transition) all within a 1ms, which may not be enough. Unfortunately I don't have any resource to back this up. In case anyone can edit this answer to provide proof, please feel free.

这篇关于在运行时更改折线图的域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 05:07
查看更多