D3.js v4/v5 fetch使い方

2018-03-12

D3でWeb上のファイルを読み込むd3-fetchについて紹介します。v5は標準で組み込まれています。v4の場合は下記をHTMLのヘッダーに追加して使います。

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以外同じです。

d3.dsvの場合は、第一引数としてdelimiterを指定する必要があります。

また、v4でd3.dsvを使う場合HTMLのヘッダーに

を追加する必要があります。

デモ

実際にD3を使ってファイルを読み込んでみます。URL”https://wizardace.com/d3-demo/fetchtest/”に以下の内容のtext.txtを置いています。

D3を使って読み込み、Div要素内に読み込んで表示します。

↑↑↑
ここにid=targetのdiv要素が組み込まれています。Hello World!と表示されていれば成功です。d3-fetchは、ajaxで用いられているXMLHttpRequestではなく、Fetch APIが使われています。最新のブラウザであれば対応していますが、(対応表はこちら)ご自身の環境が対応しているかどうかこのページでテストできます。ご活用ください。

まとめ

Web上のファイルを読み込むにはファイルサーバーを立てる必要があります。