0

私はD3を使用して、デバイスからのデータをリアルタイムでグラフ化する小さなプログラムを作成しています。デバイスは 256 サンプル/秒 (3.9 ミリ秒あたり約 1 サンプル) の速度でデータを返します。できるだけ多くのデータ ポイントをグラフ化することが重要です。

これは私が持っている関数で、各時間間隔の後に線を再描画します。これは、私が望むことを正確に行う必要があるように見えますが、そうではありません。データのグラフ化が遅すぎる:

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ミリ秒の遅延があります。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 ミリ秒の持続時間と、設定した 3.9 ミリ秒の持続時間によるものです。私が見たすべての D3 の例から、すべての遷移と再描画には期間が必要ですが、期間のある遷移なしで再描画する必要があります。私がこれを行う方法を知っている人はいますか？オンラインで数時間検索しましたが、何も思いつきませんでした。

データを 3 ダウンサンプリングして (~85.3 サンプル/秒まで)、23.4 ミリ秒ごとに 2 つのダウンサンプリングされたサンプルをプロットして、~17 ミリ秒の遅延を回避しようとしましたが、遅延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 に答える