Javascript 如何在D3中实现真正的零持续时间瞬间转换

我一直在使用D3编写一个小程序，当数据从设备中传入时，实时绘制数据图。该设备以256个采样/秒的速率返回数据（大约每3.9毫秒返回一个采样），重要的是，我要绘制尽可能多的数据点

这是我的函数，它在每个时间间隔后重新绘制线条，看起来它应该完全按照我的要求来做，但是它没有。它绘制数据的速度太慢：

样本之间的var ms\u延迟=3.9， 当前_i=0， 数据=新数组（样本中的窗口宽度）； var path=svg.append（“g”） .attr（“剪辑路径”、“url（#剪辑）”） .append（“路径”） .数据（[数据]） .attr（“类”、“行”） .attr（“d”，行）； 对于（var i=0；i 我发现“作图太慢”来自D3本身。基本上，在等待计时器启动时会发生约17毫秒的延迟。阅读文档的不同部分的文档和此文本片段，了解我面临的问题：

转换在默认为零的延迟后创建时自动开始；但是，请注意，零延迟转换实际上在最小（~17ms）延迟后开始，等待第一个计时器回调。

我经历的“慢度”来自~17毫秒的持续时间加上我设置的3.9毫秒的持续时间。从我所看到的所有D3示例中，所有转换和重画都需要一个持续时间，但我需要在不使用持续时间的转换的情况下重画。有人知道我会怎么做吗？我花了几个小时在网上搜索，结果一无所获

我甚至尝试过对数据进行3次降采样（到85.3个采样/秒），并每23.4毫秒绘制2次降采样样本，以避开17毫秒的延迟，但它只是使每个样本的延迟时间

23.4毫秒+~17毫秒=~40.4毫秒

，而不是我以前经历的

3.9毫秒+~17毫秒=~20.9毫秒

延迟

---

请帮帮我？

我想你最好放弃过渡，使用

window.requestAnimationFrame

。我想它会像这样：

function tick() {

    data[current_i] = get_next_data_point();
    current_i = (current_i + 1) % window_width_in_samples;

    path.data(data).attr("d", line);

    window.requestAnimationFrame(tick);
}

---

这将在浏览器能够接收和绘制数据时尽快请求数据。

我尝试了这一点，并得到了以下错误

Error:Problem解析d=“”

和

Uncaught TypeError:Object[Object Window]没有方法“requestAnimationFrame”

。我试过使用

window.webkitRequestAnimationFrame（勾选）（我使用的是Chrome23），它消除了后一个错误，但前者仍然存在。thinks？d3.timer（）在幕后使用requestAnimationFrame。您可以使用该功能尽可能快地更新场景；类似于：d3.timer（draw）。参见Jason Davies的评论：解决了我的问题。我添加了一些东西，不小心碰坏了一个局部变量，加上
path.data（data）.attr（“d”，line）
实际上应该是
path.data（[data]）.attr（“d”，行）在我的实现中。现在正在渲染。速度仍然不够快，但我可能必须降低采样以获得我想要的性能。我稍后会更新结果。还感谢@nautat，我也会研究一下，然后决定我最喜欢哪一个！实际上，您可以在
勾选（）
中不使用
.data（[data]）
方法，因为具有数组引用子元素的数组将在更新该子元素时更新。这可能会使事情加快一点，因为您不必一直用数据本身来破坏数据。