コンテンツへスキップ

d3-fetch

このモジュールは、Fetch上に便利な構文解析を提供します。例えば、テキストファイルを読み込むには

js
const text = await d3.text("hello-world.txt"); // "Hello, world!"

CSVファイルを読み込んで解析するには

js
const data = await d3.csv("hello-world.csv"); // [{"Hello": "world"}, …]

このモジュールは、JSONCSVTSVの解析を組み込みでサポートしています。textを直接使用することで、追加のフォーマットを解析できます。(このモジュールはd3-requestに取って代わりました。)

blob(input, init)

js
const blob = await d3.blob("example.db");

ソースコード · 指定されたinput URLのバイナリファイルをBlobとしてフェッチします。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。

buffer(input, init)

js
const buffer = await d3.buffer("example.db");

ソースコード · 指定されたinput URLのバイナリファイルをArrayBufferとしてフェッチします。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。

csv(input, init, row)

js
const data = await d3.csv("example.csv");

ソースコード · 区切り文字としてコンマ文字を使用したd3.dsvと同等です。

dsv(delimiter, input, init, row)

js
const data = await d3.dsv(",", "example.csv");

ソースコード · 指定されたinput URLのDSVファイルをフェッチします。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。行オブジェクトをより具体的な表現にマップおよびフィルタリングするためのオプションのrow変換関数を指定できます。dsv.parseの詳細を参照してください。例えば

js
const data = await d3.dsv(",", "example.csv", (d) => {
  return {
    year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
});

initrowのいずれか一方のみが指定されている場合、関数の場合はrow変換関数として解釈され、それ以外の場合はinitオブジェクトとして解釈されます。d3.csvおよびd3.tsvも参照してください。

html(input, init)

js
const document = await d3.html("example.html");

ソースコード · 指定されたinput URLのファイルをtextとしてフェッチし、次にHTMLとして解析します。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。

image(input, init)

js
const image = await d3.image("example.png");

ソースコード · 指定されたinput URLの画像をフェッチします。initが指定されている場合、読み込む前に画像に追加のプロパティを設定します。例えば、匿名のクロスオリジンリクエストを有効にするには

js
const image = await d3.image("https://example.com/image.png", {crossOrigin: "anonymous"});

json(input, init)

js
const data = await d3.json("example.json");

ソースコード · 指定されたinput URLのJSONファイルをフェッチします。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。サーバーが204 No Contentまたは205 Reset Contentのステータスコードを返す場合、プロミスはundefinedに解決されます。

svg(input, init)

js
const document = await d3.svg("example.svg");

ソースコード · 指定されたinput URLのファイルをtextとしてフェッチし、次にSVGとして解析します。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。

text(input, init)

js
const text = await d3.text("example.txt");

ソースコード · 指定されたinput URLのテキストファイルをフェッチします。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。

tsv(input, init, row)

js
const data = await d3.tsv("example.tsv");

ソースコード · 区切り文字としてタブ文字を使用したd3.dsvと同等です。

xml(input, init)

js
const document = await d3.xml("example.xml");

ソースコード · 指定されたinput URLのファイルをtextとしてフェッチし、次にXMLとして解析します。initが指定されている場合、fetchへの基礎となる呼び出しに渡されます。RequestInitで許可されるフィールドを参照してください。