d3.js - 如何在 d3js 中处理大型数据集

Question

我有一个 11 MB 的数据集。每次加载文档时加载它很慢。

d3.csv("https://s3.amazonaws.com/vidaio/QHP_Individual_Medical_Landscape.csv", function(data) {
  // drawing code...
});

我知道一旦将数据加载到浏览器中，交叉过滤器就可以用来对数据进行切片和切块。但在此之前，数据集很大。我只使用数据的聚合。似乎我应该在将数据发送到客户端之前对服务器上的数据进行预处理。也许，在服务器端使用交叉过滤器。关于如何处理/处理 d3 的大型数据集的任何建议？

Answer 1

你的数据是动态的吗？如果不是，那么您当然可以聚合它并将结果存储在您的服务器上。聚合只需要一次。即使数据是动态的，如果更改不频繁，那么您可以从仅在数据更改时聚合并缓存该结果中受益。如果您拥有高度动态的数据，因此您必须在每次页面加载时都将其重新汇总，那么在服务器与客户端上执行此操作可能取决于您期望同时有多少用户。许多同时使用的用户可能会使您的服务器瘫痪。OTOH，如果您的用户数量很少，那么您的服务器可能（可能？）比您用户的浏览器具有更多的功能，在这种情况下，它能够比浏览器更快地执行聚合。还要记住向您的用户发送 11 MB 的带宽成本。

Answer 2

• 尝试简化数据（Stephen Thomas 的评论中也提出了建议）
• 尝试将数据预解析为 json。这可能会导致更大的文件（更多的网络时间）但解析开销更少（更低的客户端 cpu）。如果您的问题是解析，这可以节省时间
• 通过某种分片键（例如年份）分解数据。限制到该分片，然后根据需要按需加载其他数据文件
• 按时间分解数据，但在 UI 中显示所有内容。在默认视图上加载图表（例如最近的时间范围），然后在附加文件到达时（或当它们全部到达时）异步添加

Answer 3

服务器端（gZip）压缩怎么样。压缩后应该是几kb，浏览器会在后台解压缩。