使用D3.js解析上传的CSV文件

cgh8pdjw 于 2022-11-12 发布在其他

关注(0)|答案(3)|浏览(181)

我是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.js

来源：https://stackoverflow.com/questions/36079390/parse-uploaded-csv-file-using-d3-js

3条答案

按热度按时间

htrmnn0y1#

您已经很接近了，但是您不需要也不能在reader.result.d3.csv上调用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>

赞(0）回复(0）举报 2022-11-12

eaf3rand2#

这适用于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（选项卡）依赖于dsv.js
dsv.js

如果只加载CSV，则不要导入整个JS。（而不是d3-csv.js）
https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js
https://cdn.jsdelivr.net/npm/d3-dsv@3.0.1/dist/d3-dsv.min.js

赞(0）回复(0）举报 2022-11-12

xv8emn3q3#

这是一个老问题，我认为我们必须澄清一些问题。
1.如何加载本地csv文件
1.如何将加载的文件与D3链接

1.加载一个文件很简单只要查一下这个例子：

第一个
这里我们有一个简单的input元素，它有type="file"属性，这让我们选择一个csv文件，然后每当选择一个文件时，readFile()函数就会被触发，并在阅读文件为二进制字符串后调用onload函数。

2.我建议使用`readAsDataURL()`将其与d3集成，如下所示：

第一个
为了整合加载的file，我们调用previewCSVData()并传递file，然后我们使用d3.csv()方法解析它。

备注：

d3.csv在内部使用fetch，并适用于任何类型的URL（httpURL、dataURL、blobURL等）

赞(0）回复(0）举报 2022-11-12

我来回答

使用D3.js解析上传的CSV文件

3条答案

1.加载一个文件很简单只要查一下这个例子：

2.我建议使用`readAsDataURL()`将其与d3集成，如下所示：

备注：

相关问题

热门标签

最新问答

使用D3.js解析上传的CSV文件

3条答案

1.加载一个文件很简单只要查一下这个例子：

2.我建议使用readAsDataURL()将其与d3集成，如下所示：

备注：

相关问题

热门标签

最新问答

2.我建议使用`readAsDataURL()`将其与d3集成，如下所示：