如何在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);
}

那將要求瀏覽器盡快接收和繪制數據。