目录
当前位置: 首页 > 文档资料 > D3.js 帮助文档 >

d3-fetch

优质
小牛编辑
117浏览
2023-12-01

这个模块基于Fetch之上添加了解析功能。例如加载一个 text 文件:

d3.text("/path/to/file.txt").then(function(text) {
  console.log(text); // Hello, world!
});

加载并转换 CSV 文件:

d3.csv("/path/to/file.csv").then(function(data) {
  console.log(data); // [{"Hello": "world"}, …]
});

这个模块内部支持Installing

使用NPM安装:npm install d3-fetch. 下载latest release. 直接从d3js.orgstandalone library的形式加载. 支持 AMD, CommonJS, 和 原始标签用法。使用原始方法时会全局暴露 d3 变量:

<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
<script>

d3.csv("/path/to/file.csv").then(function(data) {
  console.log(data); // [{"Hello": "world"}, …]
});

</script>

API Reference

d3.blob(input[, init]) <源码>

从指定的 input URL 以 Blob 的形式获取二进制文件。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.buffer(input[, init]) <源码>

从指定的 input URL 以 ArrayBuffer 的形式获取二进制文件。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.csv(input[, init][, row]) <源码>

等价于以逗号作为分隔符的 d3.dsv。

d3.dsv(delimiter, input[, init][, row]) <源码>

从指定的 input URL 获取 DSV 文件。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。可选的 row 转换函数可以被用来将行对象转换为更具体的形式;参考 dsv.parse 获取更多细节。例如:

d3.dsv(",", "test.csv", function(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
  };
}).then(function(data) {
  console.log(data);
});

如果只指定了 initrow 中的其中一个,如果是函数类型则将其视为 row 转换函数,否则将其视为 init 对象。

参考 d3.csv 和 d3.tsv.

d3.html(input[, init]) <源码>

从指定的 input URL 以 text 获取文件然后 parses it(将其转换为) HTML。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.image(input[, init]) <源码>

从指定的 input URL 获取图片。如果指定了 init 则表示可以在图片加载之前设置任何其他属性。例如如果要启用匿名 cross-origin request(跨域请求) 则需要执行以下操作:

d3.image("https://example.com/test.png", {crossOrigin: "anonymous"}).then(function(img) {
  console.log(img);
});

d3.json(input[, init]) <源码>

从指定的 input URL 获取 JSON 文件。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.svg(input[, init]) <源码>

从指定的 input URL 获取以text 获取文件然后 parses it(将其转换) 为 SVG。 如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.text(input[, init]) <源码>

从指定的 input URL 获取 text 文件。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。

d3.tsv(input[, init][, row]) <源码>

等价于以 tab 字符作为分隔符的 d3.dsv。

d3.xml(input[, init]) <源码>

从指定的 input URL 获取以text 获取文件然后 parses it(将其转换) 为 XML。如果指定了 init 则会将其传递给底层的 fetch 方法;参考 RequestInit 获取允许的字段。