简化在 D3.js 面积图中绘制的时间序列 JSON 数据答案

【问题标题】：Simplify time-series JSON data plotted in a D3.js area chart简化在 D3.js 面积图中绘制的时间序列 JSON 数据
【发布时间】：2014-01-29 05:50:39
【问题描述】：

我们正在使用 D3.js 在堆积面积图上显示时间序列数据（计算资源的利用率，每月采样一次）：

  d3.json("/growth/instance_count_1month.json", function( data ) {

    data.forEach(function(d) {
      d.datapoints = d.datapoints.map(
        function(da) {
          // NOTE i'm not sure why this needs to be multiplied by 1000
          return {date: new Date(da[1] * 1000),
                  count: da[0]};
      });
    });

    x.domain(d3.extent(data[0].datapoints, function(d) { return d.date; }));
    y.domain([0,
              Math.ceil(d3.max(data.map(function (d) {return d3.max(d.datapoints, function (d) { return d.count; });})) / 100) * 100
             ]);

结果对我来说有点刺眼：

有没有一种简单的方法来简化数据，无论是使用 D3 还是其他现成的库？我想减少尖峰，但也要减少要绘制的数据量，因为它会失控。

我倾向于在 UI 级别执行此操作，而不是接触日志记录例程（即使必须传输冗余 JSON 数据。）

【问题讨论】：

不是您的问题的答案（想到过滤），但这里有一个使用Rickshaw 平滑时间序列数据的非常好的示例。它是建立在 D3 之上的开源软件。
您可以使用您正在使用的线/区域的interpolation 作为开始。
@ChristopherHackett，例如，数据的实际记录开始，或者它是如何传递到 javascript 接口的。
@LarsKotthoff：我做到了，但是当数据点多于像素时，它并没有真正的区别。没有什么可以插值的。
@FernOfTheAndes：是的，这就是我希望的样子:)

标签： graph d3.js time-series simplify data-manipulation

【解决方案1】：

您有多种选择，您需要根据您所拥有的数据类型和所使用的数据的需求确定最佳的前进方式。在不了解您的数据的情况下，我可以建议的最好方法是重新采样。只需以较长的时间间隔报告数据（“汇总”数据）。或者，您可以使用滚动平均值或查看各种线平滑算法。

【讨论】：

以更长的时间间隔进行采样实际上并不奏效：假设我总是希望图表中有 50 个 X 点，无论时间段如何。您不会事先知道采样间隔应该是多少（它会改变）。
如果你总是想要 50 个点，那么你就是在描述数据的某种分段线性近似。
是的。可能有办法使用 D3 的插值函数从旧数组中构建一个包含 50 个点的新数组。我会看到的。