Question

我有几年的小时数据（> 20年），我想提一下如何在浏览器中显示如此大量的数据。我想将数据显示为时间序列，因为所有不同的数据集具有相同的格式（某个时间的值），但显示不同类型的信息。我查看了d3js，并设法绘制了我的所有数据，即20年的数据或更多，然后根据这个非常好exemple使用刷子放大。但是浏览器不支持那么多数据并且变得非常慢在服务器端，我使用servlet以json格式发送数据。

我显示不同类型的数据，但都具有相同的格式，即时间和价值，但显示不同类型的信息。

感谢您提供有关可视化大型数据集的最佳做法的一些建议，提示和示例。

Answer 1

不要将所有数据都带到客户端。

相反，您可以实现一个服务器端方法，如下所示：
getData(startDate, endDate, maxSteps)

此方法始终会返回最多maxSteps个记录，但哪些记录完全取决于您和您的数据。我建议采用以下方法之一：

以下两个方法的步骤很常见：

获取startDate和endDate
如果记录少于maxSteps，则返回所有记录

使用startDate和endDate确定的记录子集继续执行以下步骤。

方法1：从您的数据中获取准确的记录。确定正确的方法可能很昂贵：

确定数据中的等距点

从最接近所选点的数据中获取记录

point = startDate;
stepTimeSpan = (endDate - startDate) / (maxSteps - 1); //will fail if maxSteps = 1
for (i = 0; i < maxSteps; i++)
{
    records.Add(getClosestTo(point));
    point = point + stepTimeSpan;
}
return records;

方法2：返回聚合产生的记录：

将maxSteps存储桶中的记录与记录（按日期）分开

作为聚合

从每个桶中获取一条记录

bucketStart = startDate;
bucketTimeSpan = (endDate - startDate) / maxSteps;
for (i = 0; i < maxSteps; i++)
{
   bucket = getRecordsBetween(bucketStart, bucketStart + bucketTimeSpan);
   records.Add( new Record( AvgDate(bucket), AvgValue(bucket) ) );
   bucketStart = bucketStart + bucketTimeSpan;
}
return records;

每次用户更改间隔时，在客户端调用此方法（使用示例中底部的小图表）。

使用maxSteps值进行游戏，直到您在效果和细节之间找到合适的平衡点。

Answer 2

使用诸如d3.js之类的库的一个问题是它依赖于SVG来创建所有数据并维护一个对象来引用数据。这显然会导致DOM爆炸，具体取决于您的数据集大小。您可以在渲染数据并将其发送到浏览器之前对数据进行采样，但粒度和准确性可能会丢失。也许你需要那些非离群值来识别趋势。这实际上取决于数据集的大小。

假设您的数据集大小约为175,200点（20年内每小时一个），我建议您使用名为ZingChart（http://www.zingchart.com）的库。它有许多不同的样式选项，但更重要的是它具有不同的渲染功能（SVG或画布），可以渲染您尝试可视化的数据量。特别是，请注意缩放功能，它可以显示每个点，以及向每个节点添加自定义标签的功能。

大型数据集可视化

2 个答案: