如何将200MB数据顺利加载到浏览器进行可视化

How to smoothly load 200MB data to browser for visualization?

本文关键字：浏览器 可视化 加载 200MB 数据      更新时间：2023-09-26

200MB的数据是在300天内收集的，每天大约600kb。

目前我使用d3.tsv 加载一个包含所有数据的文件，然后使用 setTimeout 循环访问每天。

但问题是要将 200MB 数据加载到客户端的浏览器，可能需要几分钟......

如何克服这个问题？我们可以使用一些预取和捕获技术吗？

Kibana 和 Hue 可以处理千兆字节的数据可视化。他们似乎都使用 D3 进行可视化。

他们如何解决将数据从服务器加载到客户端的时间延迟？

我正在考虑的一种方法是每秒加载每日数据，然后将这些数据合并到客户端的内存中。但是如何在d3.tsv内部进行数据合并？

   mergedData = []
   for (f in filelist) {
     d3.tsv(f, function(error, data)){
      //Following code cannot work as expected
      mergedData = mergedData.concat(data)
     }
   }

因为 d3.tsv 正在加载，所以任何全局变量都无法在其中工作。

有什么技巧可以解决这个问题吗？

就 kibana 而言，它适用于弹性搜索，该搜索可对数百万条记录进行操作，并使用聚合提取分析数字并将其显示为图表。

Hue在hadoop上工作。

简而言之，他们使用 elasticsearch 的后端支持（在 kibana 的情况下）获取大数据的统计数据，并使用 d3 将数字显示为条形图或其他图表。

因此，对于大数据，您应该考虑采取后端支持合并所有数据获取数字，并让 d3 将其显示在图形上。

相关文章：