d3.js无法可视化大型数据集

Question

我需要一些关于使用d3.js来显示大数据的建议。我从hbase中提取数据并存储在json文件中，以便使用d3.js进行可视化。当我拉几个小时的数据时，json文件的大小大约为100MB，并且可以通过d3.js轻松显示，但使用dc.js和crossfilter进行过滤的速度有点慢。但是当我拉出1周的数据集时，json文件大小变得超过1GB，并尝试使用d3.js，dc.js和crossfilter进行可视化，然后可视化工作不正常，并且也无法进行过滤。任何人都可以告诉我是否有一个很好的解决方案，或者我需要在不同的平台而不是d3上工作？

Answer 1

我绝对同意马克和戈登之前所说的话。但是我必须添加我在过去几个月学到的知识，因为我扩展了dc.js仪表板来处理相当大的数据集。

正如所指出的，当数据集转换为数千个SVG / DOM或Canvas元素时，其中一个瓶颈就是 size 。 Canvas在浏览器上更轻，但你在内存中仍然有大量的元素，每个元素都有它们的属性，点击事件等。

第二个瓶颈是数据的复杂性。 dc.js的响应性不仅取决于d3.js，还取决于crossfilter.js。如果你检查the Crossfilter example dashboard，你会发现他们使用的数据大小令人印象深刻：超过230000个条目。但是，这些数据的复杂性相当低：每个条目只有五个变量。保持数据集简单有助于扩大规模。请记住，每个条目的五个变量在可视化过程中意味着浏览器内存中的大约一百万个值。

最后一点，你提到你以JSON格式提取数据。虽然这在Javascript中非常方便，但解析和验证大型JSON文件非常苛刻。此外，它不是最紧凑的格式。 Crossfilter example data格式化为非常简单且紧凑的CSV文件。

总之，您必须找到数据的大小和复杂性之间的最佳位置。一百万个数据值（大小次复杂度）是完全可行的。将其增加一个数量级，您的应用程序可能仍可使用。

Answer 2

正如@Mark所说，画布与DOM渲染是一回事。当然，Web可视化中最大的开支是DOM元素。

但是，在某种程度上，crossfilter可以通过将数据聚合到较少数量的可视元素中来缓解这种情况。它可以让您了解数十万行数据。 1GB可能会推动它，但可能有100兆字节。

但是你确实需要知道你正在聚合的级别。因此，例如，如果是一周的时间序列数据，可能按小时划分是一个合理的可视化，7 * 24 = 168点。你实际上不会感知到更多的点，所以要求浏览器绘制数千个元素毫无意义。