Question

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

提前致谢

Answer 1

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

这是一个小片段：

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，其中加载了相当大的数据文件，您可以在开始时感受到滞后。如果数据将在两轮中加载，这个应用程序可以加载得更快。

Answer 2

那是很多数据;给我们一些前几行的样本。你在做什么，它有多少会影响屏幕上的内容？ csv来自哪里（即本地或网络服务）？

如果是下载资源的问题，取决于值的常见程度和大小，您可以将它们重构为预先加载定义的1字节密钥（哈希映射为O（1）访问）。此外，如果你使用大量的数字数据，也许不同的数字空间（即使用比基数10少的字符的东西）可以削减最终大小的一些字节，因为CSV值是字符串。

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

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

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

2 个答案: