Luc*_*ucy 5 javascript csv filereader fileparsing d3.js
我是 d3.js 的新手，所以我知道这对某些人来说可能是一个愚蠢的问题，所以请耐心等待。我正在尝试解析用户上传的 csv 文件并在控制台中打印它的输出。当我提供 CSV 文件的绝对路径时，我能够解析 CSV 文件，但是当我尝试使用文件上传功能执行相同操作时，我没有在控制台中获得任何输出..
工作 Javascript 代码..
var dataset = [];
d3.csv("sample.csv", function(data) {
dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
console.log(dataset[0]);
console.log(dataset.length);
});
控制台输出...
["Men's Brooks Ghost 8 Running Shoe Black/High Risk Red/Silver Size 11.5 M US", "Shoes", "B00QH1KYV6", "$120.00 "]
8
新的 HTML 代码..
<input type="file" id="csvfile" name="uploadCSV"/>
<br/>
<button onclick="howdy()">submit</button>
修改后的 Javascript 代码（不起作用） ..
var myfile = $("#csvfile").prop('files')[0];
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
}
reader.readAsDataURL(myfile);
var dataset = [];
d3.csv(reader.result , function(data) {
dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
console.log(dataset[0]);
console.log(dataset.length);
})
由于没有关于如何处理用户上传的 CSV 文件的官方文档，我无法弄清楚我哪里出错了..有没有办法可以使用 HTML5 文件阅读器？请帮忙..
你很接近，但你不需要也不能调用d3.csvreader.result。d3.csv进行异步 AJAX 调用以从服务器检索 CSV 文件。您已经拥有文件内容并且只想解析，因此请使用d3.csv.parse。
完整的工作示例：
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<input type="file" onchange="loadFile()" />
<script>
var reader = new FileReader();
function loadFile() {
var file = document.querySelector('input[type=file]').files[0];
reader.addEventListener("load", parseFile, false);
if (file) {
reader.readAsText(file);
}
}
function parseFile(){
var doesColumnExist = false;
var data = d3.csv.parse(reader.result, function(d){
doesColumnExist = d.hasOwnProperty("someColumn");
return d;
});
console.log(doesColumnExist);
}
</script>
</body>
</html>