Plotly：如何丢弃旧点？

Question

TL;DR 我想用 Plotly.js 显示一个长期运行的条形图。我不知道如何丢弃旧积分。

详情

https://codepen.io/Michael-F-Ellis/pen/QvXPQr 我的 CodePen 的以下更新程序几乎可以满足我的需求。它显示了 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 调用。它需要相当高效，因为目标系统的性能也受到限制。

谢谢！

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() 在添加新点时从数组开头删除旧点。

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