Skip to content

Latest commit

 

History

History
104 lines (67 loc) · 6.43 KB

README.md

File metadata and controls

104 lines (67 loc) · 6.43 KB

d3-fetch

这个模块基于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"}, …]
});

这个模块内部支持JSON, CSV, and TSV,你也可以直接对文本使用其他形式的解析(这个方法替换了d3-request模块)。

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.csvd3.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 获取允许的字段。