Javascript 情节：如何丢弃旧点？

TL；DR我想用Plotly.js显示一个长期运行的条形图。我不知道如何抛弃旧的观点

细节

我的代码笔中的以下更新程序几乎满足了我的要求。它显示了2条记录道中的一组20个样本，它们以500毫秒的间隔连续更新。在演示结束时，它将绘制所有点，以显示它们仍然存在

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.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);

解决方案是将var中的数据对象保持在Plotly之外，并在添加新点时使用shift从阵列的开头删除旧点

我对另一种解决方案持开放态度，特别是如果这种方法存在已知的内存或性能问题

从行为的角度来看，上述方法似乎是可行的。以下是修改后的更新例程：

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);

解决方案是将var中的数据对象保持在Plotly之外，并在添加新点时使用shift从阵列的开头删除旧点

---

我愿意接受另一种解决方案，特别是如果这种方法存在已知的内存或性能问题。

这正是我想要的，谢谢。只是想知道您是否仍在积极使用它，是否遇到过任何性能/内存问题？@JavierC.H。当在电脑或OS X系统上的Chrome下运行时，代码是稳定的。我在目标系统上仍然有问题，在Raspbian Jessie的Raspberry Pi 3上的chromium浏览器。几个小时后，铬最终达到100%的CPU。太好了，希望这足以满足我的需要。非常感谢。这正是我想要的，谢谢。只是想知道您是否仍在积极使用它，是否遇到过任何性能/内存问题？@JavierC.H。当在电脑或OS X系统上的Chrome下运行时，代码是稳定的。我在目标系统上仍然有问题，在Raspbian Jessie的Raspberry Pi 3上的chromium浏览器。几个小时后，铬最终达到100%的CPU。太好了，希望这足以满足我的需要。非常感谢。