javascript - 通过采样/插值减少大型数据集的大小以提高图表性能

Question

我有一大组 (>2000) 时间序列数据，我想在浏览器中使用 d3 显示这些数据。 D3 非常适合向用户显示数据的一个子集(~100 点)，但我还想要一个“上下文” View (like this)来显示整个数据集并允许用户选择作为子区域进行查看细节。

但是，当尝试在 d3 中显示那么多点时，性能很糟糕。我觉得一个好的解决方案是选择一个数据样本，然后使用某种插值(样条、多项式等，这是我知道怎么做的部分)来绘制一条与实际数据。

但是，我不清楚应该如何选择子集。数据(如下所示)具有相当平坦的区域，在这些区域需要较少的样本才能进行适当的插值，而其他区域的绝对导数非常高，需要更频繁的采样。

更复杂的是，数据存在间隙(生成数据的传感器出现故障或超出范围)，我想保留图表中的这些间隙而不是通过它们进行插值.不过，检测间隙相当简单，在使用插值绘制整个数据集后简单地将它们剪掉似乎是一个合理的解决方案。

我在 JavaScript 中执行此操作，但任何语言的解决方案或问题的数学答案都可以。

Answer 1

您可以使用 d3fc-sample模块，它提供了许多不同的算法来采样数据。 API 如下所示:

// Create the sampler
var sampler = fc_sample.largestTriangleThreeBucket();

// Configure the x / y value accessors
sampler.x(function (d) { return d.x; })
    .y(function (d) { return d.y; });

// Configure the size of the buckets used to downsample the data.
sampler.bucketSize(10);

// Run the sampler
var sampledData = sampler(data);

你可以在网站上看到它运行的例子:

https://d3fc.io/examples/sample/

最大三 Angular 形三桶算法在处理“不完整”的数据时效果很好。它不会改变桶的大小，但会确保包含波峰/波谷，从而很好地表示采样数据。