在 d3 中加载压缩的 csv 数据以进行页面优化答案

【问题标题】：Load Compressed csv data in d3 for page optimization在 d3 中加载压缩的 csv 数据以进行页面优化
【发布时间】：2014-05-28 06:57:50
【问题描述】：

我有一个 50MB 的 csv 数据，有没有可能我可以压缩数据以加载 d3.js/ dc.js 图表，现在页面太慢了我想优化它.. 任何帮助都非常感谢

提前致谢

【问题讨论】：

标签： csv d3.js dc.js

【解决方案1】：

我认为最好实现延迟加载解决方案。这个想法很简单：您创建一个小的 2MB CSV 文件并使用它呈现您的可视化。同时，您开始加载完整的 50MB CSV。

这是一个小sn-p：

DS = {} // your app holder for keeping global scope clean

d3.csv('data/small.csv', function(err, smallCSV) {

  // Start loading big file immediately
  d3.csv('data/big.csv', function(err, bigCSV) {
    DS.data = bigCSV // when big data is loaded it replaces old partial data
    DS.drawViz() // redraw viz
  })  

  // This portion of code also starts immediately, while big file is still loading
  DS.data = smallCSV
  DS.drawViz() // function which has all your d3 code and uses DS.data inside   
})

从小到大的变化可以通过用户不知道后台发生了什么事情的方式进行。考虑一下example，其中加载了相当大的数据文件，您可以在开始时感受到滞后。如果数据分两轮加载，此应用的加载速度会更快。

【讨论】：

【解决方案2】：

这是很多数据；给我们前几行的样本。你在用它做什么，它在多大程度上影响了屏幕上的内容？ csv 来自哪里（即本地或网络服务）？

如果是下载资源的问题，根据值的常见程度和大小，您可以将它们重构为 1 字节的键，并预先加载定义（哈希映射是 O(1) 访问）。此外，如果您使用大量数字数据，则可能使用不同的数字空间（即使用的字符少于以 10 为基数的字符）可以减少最终大小的一些字节，因为 CSV 值是字符串。

听起来 CSV 可能不是要走的路，特别是如果您的 CSV 主要是唯一的字符串或某些不会从上述优化中受益的数字数据。如果您从 Web 服务加载 CSV，您可以对其进行更改，以便通过某些传递的密钥返回某些块（或在服务器端更智能地处理它）。因此，您将在任何给定时间只加载您需要的内容，并可能缓存它。

最后，您可以安排多个异步调用，以类似于leakyMirror 所建议的那样以小块的形式加载整个内容。由于使用大量块可能最有意义，因此您希望使用代码来完成（而不是键入所有这些回调），并使用异步事件调度程序。我知道有一个流行的异步库 (https://github.com/caolan/async) 有很多方法可以做到这一点，或者您可以编写自己的回调调度程序。

【讨论】：