| 1 | # d3-fetch
|
|---|
| 2 |
|
|---|
| 3 | This module provides convenient parsing on top of [Fetch](https://fetch.spec.whatwg.org/). For example, to load a text file:
|
|---|
| 4 |
|
|---|
| 5 | ```js
|
|---|
| 6 | const text = await d3.text("/path/to/file.txt");
|
|---|
| 7 | console.log(text); // Hello, world!
|
|---|
| 8 | ```
|
|---|
| 9 |
|
|---|
| 10 | To load and parse a CSV file:
|
|---|
| 11 |
|
|---|
| 12 | ```js
|
|---|
| 13 | const data = await d3.csv("/path/to/file.csv");
|
|---|
| 14 | console.log(data); // [{"Hello": "world"}, …]
|
|---|
| 15 | ```
|
|---|
| 16 |
|
|---|
| 17 | This module has built-in support for parsing [JSON](#json), [CSV](#csv), and [TSV](#tsv). You can parse additional formats by using [text](#text) directly. (This module replaced [d3-request](https://github.com/d3/d3-request).)
|
|---|
| 18 |
|
|---|
| 19 | ## Installing
|
|---|
| 20 |
|
|---|
| 21 | If you use npm, `npm install d3-fetch`. You can also download the [latest release on GitHub](https://github.com/d3/d3-fetch/releases/latest). For vanilla HTML in modern browsers, import d3-fetch from Skypack:
|
|---|
| 22 |
|
|---|
| 23 | ```html
|
|---|
| 24 | <script type="module">
|
|---|
| 25 |
|
|---|
| 26 | import {csv} from "https://cdn.skypack.dev/d3-fetch@3";
|
|---|
| 27 |
|
|---|
| 28 | csv("/path/to/file.csv").then((data) => {
|
|---|
| 29 | console.log(data); // [{"Hello": "world"}, …]
|
|---|
| 30 | });
|
|---|
| 31 |
|
|---|
| 32 | </script>
|
|---|
| 33 | ```
|
|---|
| 34 |
|
|---|
| 35 | For legacy environments, you can load d3-fetch’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported:
|
|---|
| 36 |
|
|---|
| 37 | ```html
|
|---|
| 38 | <script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
|
|---|
| 39 | <script>
|
|---|
| 40 |
|
|---|
| 41 | d3.csv("/path/to/file.csv").then((data) => {
|
|---|
| 42 | console.log(data); // [{"Hello": "world"}, …]
|
|---|
| 43 | });
|
|---|
| 44 |
|
|---|
| 45 | </script>
|
|---|
| 46 | ```
|
|---|
| 47 |
|
|---|
| 48 | ## API Reference
|
|---|
| 49 |
|
|---|
| 50 | <a name="blob" href="#blob">#</a> d3.<b>blob</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/blob.js "Source")
|
|---|
| 51 |
|
|---|
| 52 | Fetches the binary file at the specified *input* URL as a Blob. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|
| 53 |
|
|---|
| 54 | <a name="buffer" href="#buffer">#</a> d3.<b>buffer</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/buffer.js "Source")
|
|---|
| 55 |
|
|---|
| 56 | Fetches the binary file at the specified *input* URL as an ArrayBuffer. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|
| 57 |
|
|---|
| 58 | <a name="csv" href="#csv">#</a> d3.<b>csv</b>(<i>input</i>[, <i>init</i>][, <i>row</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/dsv.js "Source")
|
|---|
| 59 |
|
|---|
| 60 | Equivalent to [d3.dsv](#dsv) with the comma character as the delimiter.
|
|---|
| 61 |
|
|---|
| 62 | <a name="dsv" href="#dsv">#</a> d3.<b>dsv</b>(<i>delimiter</i>, <i>input</i>[, <i>init</i>][, <i>row</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/dsv.js "Source")
|
|---|
| 63 |
|
|---|
| 64 | Fetches the [DSV](https://github.com/d3/d3-dsv) file at the specified *input* URL. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields. An optional *row* conversion function may be specified to map and filter row objects to a more-specific representation; see [*dsv*.parse](https://github.com/d3/d3-dsv#dsv_parse) for details. For example:
|
|---|
| 65 |
|
|---|
| 66 | ```js
|
|---|
| 67 | const data = await d3.dsv(",", "test.csv", (d) => {
|
|---|
| 68 | return {
|
|---|
| 69 | year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
|
|---|
| 70 | make: d.Make,
|
|---|
| 71 | model: d.Model,
|
|---|
| 72 | length: +d.Length // convert "Length" column to number
|
|---|
| 73 | };
|
|---|
| 74 | });
|
|---|
| 75 | ```
|
|---|
| 76 |
|
|---|
| 77 | If only one of *init* and *row* is specified, it is interpreted as the *row* conversion function if it is a function, and otherwise an *init* object.
|
|---|
| 78 |
|
|---|
| 79 | See also [d3.csv](#csv) and [d3.tsv](#tsv).
|
|---|
| 80 |
|
|---|
| 81 | <a name="html" href="#html">#</a> d3.<b>html</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/xml.js "Source")
|
|---|
| 82 |
|
|---|
| 83 | Fetches the file at the specified *input* URL as [text](#text) and then [parses it](https://developer.mozilla.org/docs/Web/API/DOMParser) as HTML. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|
| 84 |
|
|---|
| 85 | <a name="image" href="#image">#</a> d3.<b>image</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/image.js "Source")
|
|---|
| 86 |
|
|---|
| 87 | Fetches the image at the specified *input* URL. If *init* is specified, sets any additional properties on the image before loading. For example, to enable an anonymous [cross-origin request](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image):
|
|---|
| 88 |
|
|---|
| 89 | ```js
|
|---|
| 90 | const img = await d3.image("https://example.com/test.png", {crossOrigin: "anonymous"});
|
|---|
| 91 | ```
|
|---|
| 92 |
|
|---|
| 93 | <a name="json" href="#json">#</a> d3.<b>json</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/json.js "Source")
|
|---|
| 94 |
|
|---|
| 95 | Fetches the [JSON](http://json.org) file at the specified *input* URL. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields. If the server returns a status code of [204 No Content](https://developer.mozilla.org/docs/Web/HTTP/Status/204) or [205 Reset Content](https://developer.mozilla.org/docs/Web/HTTP/Status/205), the promise resolves to `undefined`.
|
|---|
| 96 |
|
|---|
| 97 | <a name="svg" href="#svg">#</a> d3.<b>svg</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/xml.js "Source")
|
|---|
| 98 |
|
|---|
| 99 | Fetches the file at the specified *input* URL as [text](#text) and then [parses it](https://developer.mozilla.org/docs/Web/API/DOMParser) as SVG. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|
| 100 |
|
|---|
| 101 | <a name="text" href="#text">#</a> d3.<b>text</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/text.js "Source")
|
|---|
| 102 |
|
|---|
| 103 | Fetches the text file at the specified *input* URL. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|
| 104 |
|
|---|
| 105 | <a name="tsv" href="#tsv">#</a> d3.<b>tsv</b>(<i>input</i>[, <i>init</i>][, <i>row</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/dsv.js "Source")
|
|---|
| 106 |
|
|---|
| 107 | Equivalent to [d3.dsv](#dsv) with the tab character as the delimiter.
|
|---|
| 108 |
|
|---|
| 109 | <a name="xml" href="#xml">#</a> d3.<b>xml</b>(<i>input</i>[, <i>init</i>]) · [Source](https://github.com/d3/d3-fetch/blob/master/src/xml.js "Source")
|
|---|
| 110 |
|
|---|
| 111 | Fetches the file at the specified *input* URL as [text](#text) and then [parses it](https://developer.mozilla.org/docs/Web/API/DOMParser) as XML. If *init* is specified, it is passed along to the underlying call to [fetch](https://fetch.spec.whatwg.org/#fetch-method); see [RequestInit](https://fetch.spec.whatwg.org/#requestinit) for allowed fields.
|
|---|