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

D3.js 如何在d3js中处理大型数据集,d3.js,crossfilter,dc.js,D3.js,Crossfilter,Dc.js,我有一个11MB的数据集。每次加载文档时都很慢 d3.csv("https://s3.amazonaws.com/vidaio/QHP_Individual_Medical_Landscape.csv", function(data) { // drawing code... }); 我知道,一旦数据加载到浏览器中,就可以使用交叉过滤器对数据进行切片和切分。但在此之前,数据集很大。我只使用数据的聚合。似乎我应该在将数据发送到客户端之前在服务器上预处理数据。也许,在服务器端使用交叉过滤器。关

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

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

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

您的数据是动态的吗?如果不是,那么您当然可以聚合它并将结果存储在服务器上。聚合只需要一次。即使数据是动态的,如果更改很少,那么只有在数据更改时进行聚合并缓存结果,您才能从中受益。如果您拥有高度动态的数据,因此必须在每次页面加载时对其进行新的聚合,那么在服务器上进行聚合与在客户机上进行聚合可能取决于您希望同时使用多少用户。大量同时使用的用户可能会使服务器崩溃。OTOH,如果您有少量用户,那么您的服务器可能(可能?)比您用户的浏览器具有更大的马力,在这种情况下,它将能够比浏览器更快地执行聚合。还要记住向用户发送11MB的带宽成本。可能没什么大不了的。。。除非他们在移动设备上大量加载页面。

您的数据是动态的吗?如果不是,那么您当然可以聚合它并将结果存储在服务器上。聚合只需要一次。即使数据是动态的,如果更改很少,那么只有在数据更改时进行聚合并缓存结果,您才能从中受益。如果您拥有高度动态的数据,因此必须在每次页面加载时对其进行新的聚合,那么在服务器上进行聚合与在客户机上进行聚合可能取决于您希望同时使用多少用户。大量同时使用的用户可能会使服务器崩溃。OTOH,如果您有少量用户,那么您的服务器可能(可能?)比您用户的浏览器具有更大的马力,在这种情况下,它将能够比浏览器更快地执行聚合。还要记住向用户发送11MB的带宽成本。可能没什么大不了的。。。除非他们在移动设备上大量加载页面。

  • 尝试简化数据(Stephen Thomas的评论中也有建议)
  • 尝试将数据预解析为json。这可能会导致文件更大(网络时间更长),但解析开销更小(客户端cpu更低)。如果您的问题是解析,这可以节省时间
  • 使用某种切分键(如年份)分解数据。将数据限制到该碎片,然后根据需要加载其他数据文件
  • 按时间分解数据,但在UI中显示所有内容。在默认视图(如最近的时间段)上加载图表,但在其他文件到达时(或全部到达时)异步添加这些文件
      • 尝试简化数据(Stephen Thomas的评论中也有建议)
      • 尝试将数据预解析为json。这可能会导致文件更大(网络时间更长),但解析开销更小(客户端cpu更低)。如果您的问题是解析,这可以节省时间
      • 使用某种切分键(如年份)分解数据。将数据限制到该碎片,然后根据需要加载其他数据文件
      • 按时间分解数据,但在UI中显示所有内容。在默认视图(如最近的时间段)上加载图表,但在其他文件到达时(或全部到达时)异步添加这些文件

      服务器端(gZip)压缩怎么样。压缩后应为几kb,浏览器将在后台反压缩。

      服务器端(gZip)压缩如何。压缩后应为几kb,浏览器将在后台反压缩。

      如您所说,在服务器上进行预处理。或者使用一个只有聚合值的较小版本的文件。嗯,也许你应该添加一个加载屏幕。我不认为服务器端交叉过滤会更快。@caffinatedmonkey,我可以将数据存储在我们的mongodb后端,而不是从URL加载。@Phoocdo您可以使用Google BigQuery设置缓存实验。它提供了一种动态筛选和聚合数据集的好方法。就像你说的,在服务器上进行预处理。或者使用一个只有聚合值的较小版本的文件。嗯,也许你应该添加一个加载屏幕。我不认为服务器端交叉过滤会更快。@caffinatedmonkey,我可以将数据存储在我们的mongodb后端,而不是从URL加载。@Phoocdo您可以使用Google BigQuery设置缓存实验。它提供了一种动态筛选和聚合数据集的好方法。数据是静态的,但我想围绕动态数据构建动态过滤器。交叉筛选似乎很合适。那么您可能别无选择,只能将文件加载到浏览器中。虽然有一个npm版本的crossfilter可以在node.js服务器上运行,但您必须创建一种机制,在浏览器和服务器之间进行通信,以动态更改筛选器,然后更新数据。您需要数据集中的所有字段吗?如果没有,则通过删除无关列进行预处理可能会有所帮助。您还可以缩短单个值,例如,将美元值转换为简单整数(例如,“120”而不是“$120.00”)。数据是静态的,但我希望动态地围绕数据构建动态过滤器。交叉筛选似乎很合适。那么您可能别无选择,只能将文件加载到浏览器中。虽然有一个npm版本的crossfilter可以在node.js服务器上运行,但您必须创建一种机制,在浏览器和服务器之间进行通信,以动态更改筛选器,然后更新数据。您需要数据集中的所有字段吗