如何将非常大的CSV数据集加载到d3中

spa*_*a93 2 javascript csv d3.js

正如标题所示,我有一个CSV文件(约250mb和700k行),我无法加载到d3中.我尝试按照我通常为csv文件的方式加载它,但没有运气.目前,它没有出错,我在控制台中得到一个空的数据数组.不确定文件是否太大或我加载错误.将不胜感激任何帮助.谢谢.

            var dataset;
            d3.csv("Consumer_Complaints.csv", function (error, data) {
                if (error) {  
                    console.log(error);  
                } else {
                    console.log("file load successful?");
                    console.log(data);   

                    dataset = data;
                }
            });
Run Code Online (Sandbox Code Playgroud)

Ger*_*ado 8

这与D3无关,但通常使用JavaScript.D3对可以加载和解析的文件大小没有限制.

Javascript在客户端运行(有一些例外).这意味着您的代码必须下载(如果在不同的服务器中)所有巨大的 CSV文件,并且不仅如此,它还必须解析大量对象中的数十万行.这太过分了.

所以,常识告诉我们要考虑:

  • 用户的连接速度
  • 用户的处理能力
  • 用户耐心地盯着空白屏幕看几分钟,等待数据下载/解析.

这是一个加载巨大CSV文件的演示(来自data.gov网站),您可以在控制台中看到加载的数据量.我还用一个console.time来显示下载和解析文件所需的总时间(如果你有耐心等到最后,我没有):

console.time("totalTime:");
d3.csv("https://data.consumerfinance.gov/api/views/s6ew-h6mp/rows.csv")
    .on("progress", function(evt) {
        console.log("Amount loaded: " + evt.loaded)
    })
    .get(function(data) {
        console.timeEnd("totalTime:");
    });
Run Code Online (Sandbox Code Playgroud)
<script src="https://d3js.org/d3.v4.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

  • 是的,这是最好的方法. (3认同)