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

对于JSON：

var data = JSON.parse(JavascriptStringVariableThatContainsJSON);

对于CSV：

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

//然后将数据添加到图表并调用enter，如：

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

Answer 2

如果您想“获取文件及其内容并使用它”，您可以在回调后将d3.csv()方法中的文件加载到内容中，并将要进行的更改应用于内容。

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

使用js加载本地.csv并使用d3.js处理它

2 个答案: