关于javascript：使用js加载本地.csv并使用d3.js对其进行处理


Load local .csv with js and process it with d3.js

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

首先，我创建了一些参考文献中建议的以下功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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。但这就是我遇到的问题-控制台日志仅显示一个空数组。

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

.csv文件具有以下结构。

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

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

相关讨论

对于JSON：

1
var data = JSON.parse(JavascriptStringVariableThatContainsJSON);

对于CSV：

1
 var data = d3.csv.parseRows(JavascriptStringVariableThatContainsMyCSVdata);

//然后将数据添加到图形并调用enter，如下所示：

1
 var dataEnter = svg.selectAll("rect").data(data).enter();

如果要"获取文件及其内容并使用它"，则可以在回调之后将文件加载到d3.csv()方法内部，然后将要进行的更改应用于内容。 >

1
2
3
4
5
d3.csv('/path/to/myfile.csv, function(data) {
    // Modify the files data
    ...
    // Do something with d3.js
});
相关讨论