2.我建议使用
我是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 文件阅读器？请帮忙..
你很接近，但你不需要也不能在 reader.result 上调用d3.csv。 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>这是https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js
针对d3-csv@3
<!-- https://www.jsdelivr.com/package/npm/d3-dsv -->
<script src="https://cdn.jsdelivr.net/npm/d3-dsv@3.0.1/dist/d3-dsv.min.js" integrity="sha256-IrzYc2a3nTkfvgAyowm/WKmIGdVCMCcccPtz+Y2y6VI=" crossorigin="anonymous"></script>
<input type="file" accept=".csv">
<button>test button</button>
<script>
const testData = `owner,repo,"branch name"
foo,demo,master
boo,"js awesome",sha1123456
`
document.querySelector(`input`).onchange = async e => {
const input = e.target
const file = input.files[0]
const reader = new FileReader()
reader.readAsText(new Blob(
[file],
{"type": file.type}
))
const fileContent = await new Promise(resolve => {
reader.onloadend = (event) => {
resolve(event.target.result)
}
})
const csvData = d3.csvParse(fileContent)
console.log(csvData)
}
document.querySelector(`button`).onclick = e => {
const csvData = d3.csvParse(testData)
console.log(csvData)
}
</script>下面的链接可以帮助你了解csvParse的实现
- csv.js ： csv， tsv（tab） 依赖于 dsv.js
- DSV.js
如果仅加载 CSV，则不要导入整个 JS。（而不是d3-csv.js）
https://cdn.jsdelivr.net/npm/d3-dsv@3.0.1/dist/d3-dsv.min.js
这是一个老问题，我认为我们必须澄清一些要点。
- 如何加载本地 csv 文件
- 如何将加载的文件与 D3 链接
1.加载文件非常简单，只需检查此示例：
const fileInput = document.getElementById('csv')
const readFile = e => {
const reader = new FileReader()
reader.onload = () => {
document.getElementById('out').textContent = reader.result
}
reader.readAsBinaryString(fileInput.files[0])
}
fileInput.onchange = readFile<div>
<p>Select local CSV File:</p>
<input id="csv" type="file" accept=".csv">
</div>
<pre id="out"><p>File contents will appear here</p></pre>在这里，我们有一个简单的input元素type="file"属性，这让我们可以选择一个csv文件。然后，每当选择文件时都会触发readFile()函数，并在将文件作为二进制字符串读取后调用 onload 函数。
2.我建议使用readAsDataURL()将其与d3集成，如下所示：
const fileInput = document.getElementById('csv')
const previewCSVData = async dataurl => {
const d = await d3.csv(dataurl)
console.log(d)
}
const readFile = e => {
const file = fileInput.files[0]
const reader = new FileReader()
reader.onload = () => {
const dataUrl = reader.result;
previewCSVData(dataUrl)
}
reader.readAsDataURL(file)
}
fileInput.onchange = readFile<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div>
<p>Select local CSV File:</p>
<input id="csv" type="file" accept=".csv">
</div>
<pre id="out"><p>File contents will appear here</p></pre>为了集成加载的file我们调用previewCSVData()并传递file然后使用d3.csv()方法解析它。另外让我们使用 await，因为它是一个异步调用。
注意：
d3.csv内部使用fetch并适用于任何类型的URL（httpURL，dataURL，blobURL等）。