跳至内容

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.csvd3.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 无内容205 重置内容 的状态代码,则 promise 将解析为 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