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

Question

正如标题所示，我有一个 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;
                }
            });

Answer 1

这与 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:");
    });

<script src="https://d3js.org/d3.v4.min.js"></script>