7

私は 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 ファイル リーダーを使用する方法はありますか?? 助けてください..

4

2 に答える 2

9

d3.csvあなたは近くにいますが、reader.result を呼び出す必要はなく、呼び出すこともできません。d3.csvサーバーから CSV ファイルを取得するために非同期 AJAX 呼び出しを行います。すでにファイルの内容があり、解析したいだけなので、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>

于 2016-03-18T18:37:28.073 に答える
0

これは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 全体をインポートしないでください。(の代わりに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

于 2021-09-08T10:37:42.833 に答える