JavaScriptのD3.jsに関する質問です。
D3.jsにてCSVファイルを読み込む際、csvクラスを用いて読み込みますが、その際の第一引数はファイルの"パス"となっています。
そこで、ブラウザからフォームを用いてダイアログを開き、ユーザーのローカルフォルダから任意のCSVファイルを読み込みグラフの作成などを行いたいのですが、そのような動作は可能でしょうか。
d3.csv("data.csv", function(error, data){
#ほげほげ
});
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するJavaScriptのD3.jsに関する質問です。
D3.jsにてCSVファイルを読み込む際、csvクラスを用いて読み込みますが、その際の第一引数はファイルの"パス"となっています。
そこで、ブラウザからフォームを用いてダイアログを開き、ユーザーのローカルフォルダから任意のCSVファイルを読み込みグラフの作成などを行いたいのですが、そのような動作は可能でしょうか。
d3.csv("data.csv", function(error, data){
#ほげほげ
});
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ファイルを用意してお試しください。
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);
}
});
}
});
<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>