Plotly：古いポイントを破棄する方法は？

Question

TL; DR Plotly.jsを使用して長時間実行中のストリップチャートを表示したい。私は古い点を捨てる方法を知らない。 https://codepen.io/Michael-F-Ellis/pen/QvXPQrで私CodePenから

詳細

次アップデータは、私が欲しいものはほとんどありません。 500 msecの間隔で連続的に更新する2つのトレースの20個のサンプルのセットを示します。デモの終わりには、それらがまだ存在することを示すためにすべての点をプロットします。

var cnt = 0; 
var interval = setInterval(function() { 
    // Add next point to each trace 
    Plotly.extendTraces('graph', { 
    y: [[rand()], [rand()]] 
    }, [0, 1]) 
    // Display only 20 most recent points 
    Plotly.relayout('graph', { 'xaxis.range': [cnt-20, cnt]}) 

    cnt = cnt+1; 
    if(cnt === 100) { 
    // Before ending the run, show all points 
    // to demonstrate they still exist in Plotly. 
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); 
    clearInterval(interval); 
    } 
}, 500); 

問題は、私は古いポイントを削除しますかということです。実際のアプリケーションは、メモリが限られているシステムで本質的に永遠に実行する必要があります。最も古いN個のトレースポイントを削除するPlotlyコールを探しています。ターゲットシステムのパフォーマンスも限られているため、合理的に効率的である必要があります。

ありがとうございます！

Answer 1

https://codepen.io/Michael-F-Ellis/pen/YxeEwm

上記の行動の観点から実行可能なようです。ここで改訂された更新ルーチンです：

Plotly.plot('graph', data); 
var cnt = 0; 
var max = 20; 
var interval = setInterval(function() { 
    // Add next point to each trace 
    Plotly.extendTraces('graph', { 
    y: [[rand()], [rand()]] 
    }, [0, 1]) 
    // Keep only 'max' most recent points 
    if(cnt > max) { 
    data[0].y.shift(); 
    data[1].y.shift(); 
    } 
    cnt = cnt+1; 
    if(cnt === 100) { 
    // Before ending the run, show all points 
    // to demonstrate that only 'max' points 
    // still exist in Plotly. 
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); 
    clearInterval(interval); 
    } 
}, 500); 

ソリューションはPlotlyのVaRの外にデータオブジェクトを保持して、新しいポイントが追加されると、配列の先頭から古いポイントをドロップするshift()を使用することです。

特に、このアプローチではメモリやパフォーマンスの問題があるとわかっています。