

JavaScriptのD3.jsに関する質問です。  
D3.jsにてCSVファイルを読み込む際、csvクラスを用いて読み込みますが、その際の第一引数はファイルの"パス"となっています。  
そこで、ブラウザからフォームを用いてダイアログを開き、ユーザーのローカルフォルダから任意のCSVファイルを読み込みグラフの作成などを行いたいのですが、そのような動作は可能でしょうか。

[code]

    d3.csv("data.csv", function(error, data){
    #ほげほげ
    });
    
[/code]


CC BY-SA 3.0
2016-04-21T06:35:59.013
24213
2016-04-21T09:14:30.547
15236
question
javascript d3.js
D3.jsを用いブラウザからCSVファイルを選択して読み込む方法


d3は詳しくありませんので、グラフ処理などはご自身でお調べください。ローカルファイルの読み込みはd3にあまり関係有りませんね。ではドキュメントを見ます。

<https://github.com/mbostock/d3/wiki/CSV>

> # d3.csv(url[[, accessor], callback])
>
> Issues an HTTP GET request for the comma-separated values (CSV) file at the
> specified url. The file contents are assumed to be RFC4180-compliant. The
> mime type of the request will be "text/csv". The request is processed
> asynchronously, such that this method returns immediately after opening the
> request.

引数`url`に対して`GET`を発行し、ajaxでファイルを読んでパースするメソッドですね。  
これを利用する、ということなら、ローカルファイルを`<input type="file" />`で選択して、ここから _objectURL_
を生成し渡すというのがいいでしょう。  
あるいは、ajaxでファイルの内容を読み込んでしまって、csv文字列を`d3.csv.parse`に渡すのも手段としてはありではないでしょうか。

サンプルを用意しましたので、適当なcsvファイルを用意してお試しください。

[code]

    var select = document.querySelector('#selectFileInputFile');
    var view = document.querySelector('#view');
    
    select.addEventListener('change', function () {
     var file = select.files[0];
      if (file) {
        var url = URL.createObjectURL(file);
        d3.csv(url, function (err, data) {
         if (!err) {
            view.textContent = JSON.stringify(data, null, 4);
          }
        });
      }
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    
    <input id="selectFileInputFile" type="file" />
    <pre id="view"></pre>
[/code]


CC BY-SA 3.0
2016-04-21T09:14:30.547
24218
2016-04-21T09:14:30.547
24213
answer