D3.js v4/v5 fetch使い方
D3でWeb上のファイルを読み込むd3-fetchについて紹介します。v5は標準で組み込まれています。v4の場合は下記をHTMLのヘッダーに追加して使います。
|
1 |
<script src="https://d3js.org/d3-fetch.v1.min.js"></script> |
APIには次の種類があります。
- d3.blob
- d3.buffer
- d3.csv
- d3.dsv
- d3.html
- d3.image
- d3.json
- d3.svg
- d3.text
- d3.tsv
- d3.xml
使い方は、 d3.dsv以外同じです。
|
1 2 3 |
d3.text("/path/file.txt").then(function(data) { // ここに読み込んだ後の処理 }); |
d3.dsvの場合は、第一引数としてdelimiterを指定する必要があります。
|
1 2 3 |
d3.dsv(",", "/path/file.csv").then(function(data) { // ここに読み込んだ後の処理 }); |
また、v4でd3.dsvを使う場合HTMLのヘッダーに
|
1 |
<script src="https://d3js.org/d3-dsv.v1.min.js"></script> |
を追加する必要があります。
デモ
実際にD3を使ってファイルを読み込んでみます。URL”https://wizardace.com/d3-demo/fetchtest/”に以下の内容のtext.txtを置いています。
|
1 |
Hello World! |
D3を使って読み込み、Div要素内に読み込んで表示します。
|
1 2 3 4 5 |
d3.text("https://wizardace.com/d3-demo/fetchtest/test.txt").then( function(data){ d3.select('#target').append("text").text(data); } ); |
↑↑↑
ここにid=targetのdiv要素が組み込まれています。Hello World!と表示されていれば成功です。d3-fetchは、ajaxで用いられているXMLHttpRequestではなく、Fetch APIが使われています。最新のブラウザであれば対応していますが、（対応表はこちら）ご自身の環境が対応しているかどうかこのページでテストできます。ご活用ください。
まとめ
Web上のファイルを読み込むにはファイルサーバーを立てる必要があります。