如何在D3中进行真正的零持续时间即时转换

Question

我一直在使用D3编写一个小程序来实时绘制图形数据，这些数据来自设备。 该设备以256个样本/秒的速率返回数据（每3.9 ms大约一个样本），并且重要的是，我要绘制尽可能多的数据点。

这是我具有的功能，该功能在每个时间间隔后重绘该行，看起来它应该完全符合我的要求，但事实并非如此。 它绘制数据的速度太慢：

var ms_delay_between_samples = 3.9,
    current_i = 0,
    data = new Array(window_width_in_samples);

var path = svg.append("g")
           .attr("clip-path", "url(#clip)")
           .append("path")
           .data([data])
           .attr("class", "line")
           .attr("d", line);

for(var i = 0; i < data.length; i++) data[i] = null;

function tick() {

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

    path
            .attr("d", line)
            .transition()
            .duration(ms_delay_between_samples)
            .ease("linear")
            .each("end", tick);

}

我发现“绘图太慢”来自D3本身。 基本上，在等待计时器启动时会发生〜17 ms的延迟。请从doc的不同部分阅读doc 的duration函数和此文本片段，以了解我面临的问题：

Transitions start automatically upon creation after a delay which defaults to zero; however, note that a zero-delay transition actually starts after a minimal (~17ms) delay, pending the first timer callback.

我遇到的“缓慢”是从〜17 ms持续时间加上我设置的3.9 ms持续时间。 从我看到的所有D3示例中，所有过渡和重绘都需要一定的持续时间，但是我需要重绘而没有持续时间的过渡。 有人知道我会怎么做吗？ 我花了几个小时在网上搜索，却一无所获。

我什至尝试对数据进行3个下采样（至约85.3个样本/秒），并每23.4 ms绘制2个下采样的样本，以避开〜17 ms的延迟，但是这只会使延迟时间为23.4 ms + ~17 ms = ~40.4 ms每个样本23.4 ms + ~17 ms = ~40.4 ms ，而不是我之前遇到的3.9 ms + ~17ms = ~20.9 ms延迟。

请帮我？

Answer 1

我认为，对于快速流畅的动画而言，最好的选择是放弃过渡并使用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);
}

那将要求浏览器尽快接收和绘制数据。