javascript - 在运行时更改折线图的域

Question

在我的代码中，我正在加载包含 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”:29 39.896657485737,"T8":9.551935316881588}

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

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

在第 300 行中，"AF4": - 1000。(在本例中，所有行的域应为 [-1000,7000])

为了实现这一改变，我特意修改了一些数据。我希望所有线路都更新到这个新域，如果可能的话用动画。

我该怎么做？

这是我的代码:

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

Answer 1

要更新所有折线图的域，我们需要在新数据插入之前重新计算域。

骗子: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())

关于图形的 trim ，数据需要在 1 毫秒内进行操作(在您的情况下，14 个数组、对数组的推送和移位操作以及 D3 转换)，这可能还不够。不幸的是我没有任何资源来支持这一点。如果有人可以编辑此答案以提供证据，请随意。