0

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

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

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 毫秒的延迟。阅读文档以了解持续时间函数和来自文档不同部分的文本片段，以了解我面临的问题：

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 毫秒的持续时间加上我设置的 3.9 毫秒的持续时间。从我见过的所有 D3 示例中，所有过渡和重绘都需要持续时间，但我需要在没有持续时间的过渡的情况下重绘。有人知道我会怎么做吗？我花了几个小时在网上搜索，却一无所获。

我什至尝试将数据下采样 3（至 ~85.3 个样本/秒）并每 23.4 ms 绘制 2 个下采样样本以绕过 ~17 ms 延迟，但它只是使23.4 ms + ~17 ms = ~40.4 ms每个样本的延迟时间而不是3.9 ms + ~17ms = ~20.9 ms延迟我以前经历过。

请帮我？

4

1 回答 1

0

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

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

于 2012-12-31T18:44:09.933 回答