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

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   
})

从小到大的变化可以用这样的方式完成,即用户不知道,后台发生了什么.考虑这个示例,其中加载了相当大的数据文件,您可以在开始时感受到滞后.如果数据将在两轮中加载,这个应用程序可以加载更快.