SVG HTML CSSを使用した効率的な連続スクロールグラフ

Question

新しいデータポイントが連続して入力され、プロットされるリアルタイムグラフを作成しました。

現在、私は要素の更新された位置を毎秒30回レンダリングするrequestAnimationFame（）を使用しています。

多くのSVG要素では、これは少し遅くなることがあります。

SVGアニメーション、CSSアニメーション、またはCSSトランジションで連続的にスクロールするグラフを実装する最も効率的な方法は何ですか？ （サードパーティライブラリなし）。

ありがとうございます。

Answer 1

Fiddleここにはかなり良い解決策があります。

これはMike Bostockと、D3の使い方に関する素晴らしいチュートリアルです。そのチュートリアルではマイクは最初からフィドルを達成する方法を説明しますが、あなたのための重要な部分は、redraw機能です：

function redraw() { 

    var rect = chart.selectAll("rect") 
     .data(data, function (d) { 
     return d.time; 
    }); 

    rect.enter().insert("rect", "line") 
     .attr("x", function (d, i) { 
     return x(i + 1) - .5; 
    }) 
     .attr("y", function (d) { 
     return h - y(d.value) - .5; 
    }) 
     .attr("width", w) 
     .attr("height", function (d) { 
     return y(d.value); 
    }) 
     .transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.exit().transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i - 1) - .5; 
    }) 
     .remove(); 

} 

は、それが入ってくるデータに基づいて新しいRECTを追加して、最も古いRECTをフェードイン、およびのでご希望のスクロールを作成しますアクション。これはあなたのニーズに適応するのはかなり簡単ですが、固定量のrectを仮定します。

質問から一度でも画面上に無制限の長方形を表示したいと思うかもしれませんが、最終的にはこれは望ましくありません。表示する矩形の長さを設定して、サイトのパフォーマンスを最大限に引き出すことができます。それ以上にあなたとあなたのユーザーのためにクラッシュします。 1つのフェードアウトで1つをフェードインすることは、svgカウントが十分に高くなると継続的にロードするより効率的です。