- 指南
- D3 API 手册
- d3-array
- d3-axis
- d3-brush
- d3-chord
- d3-collection
- d3-color
- d3-scale-chromatic
- d3-contour
- d3-dispatch
- d3-drag
- d3-dsv
- d3-ease
- d3-fetch
- d3-force
- d3-format
- d3-geo
- d3-hierarchy
- d3-interpolate
- d3-path
- d3-polygon
- d3-quadtree
- d3-random
- d3-scale
- d3-selection
- d3-shape
- d3-time-format
- d3-time
- d3-timer
- d3-transition
- d3-voronoi
- d3-zoom
- d3-contour
- d3-dispatch
- d3-drag
- d3-dsv
- d3-ease
- d3-fetch
- d3-force
- d3-format
- d3-geo
- d3-hierarchy
- d3-interpolate
- d3-path
- d3-polygon
- d3-quadtree
- d3-random
- d3-selection
- d3-shape
- d3-time-format
- d3-time
- d3-timer
- d3-transition
- d3-voronoi
- d3-zoom
- SVG 起步
- SVG 接口方法
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"}, …]
});
这个模块内部支持Installing
使用NPM安装:npm install d3-fetch
. 下载latest release. 直接从d3js.org以standalone 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);
});
如果只指定了 init 和 row 中的其中一个,如果是函数类型则将其视为 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 获取允许的字段。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论