javascript - 用js加载本地.csv，用d3.js处理

Question

我坚持以下几点。 我没有正在运行的本地 http 服务，所以我想以其他方式处理我的文件加载。

首先，我按照一些引用资料中的建议创建了以下函数。

var fileArray = [];
function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files;
        window.array = []
        if (f) {
            var r = new FileReader();
                r.onload = function(e) { 
                var contents = e.target.result;
                window.array.push(contents);
                fileArray.push({name:f.name, contents: contents});
                }
                r.readAsText(f);
                console.log(fileArray);
                } else { 
                    alert("Failed to load file");
                }
            }
            document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

然后我尝试在 d3.csv 函数中调用 fileArray。但这就是我卡住的地方——控制台日志只显示一个空数组。

var dataset = []
                    d3.csv(fileArray, function(data) {
                    dataset = data.map(function(d) { return [ d["TEXT"], +d["HOURS"], +d["MONTH_DIGIT"] ]; });
                    console.log(dataset)
                });

.csv 文件具有以下结构。

"TEXT","HOURS","MONTH_DIGIT"
"Adjustments work",849.45,"01"

我如何准确地调用该文件以使用 d3.js？

Answer 1

如果你想“获取文件及其内容并使用它”，你可以在 d3.csv() 方法中加载文件，在回调之后应用你的更改想做的内容。

d3.csv('/path/to/myfile.csv, function(data) {
    // Modify the files data
    ...
    // Do something with d3.js
});