d3-fetch

Этот модуль предоставляет удобный парсер поверх Fetch. Например, для загрузки текстового файла:

const text = await d3.text("/path/to/file.txt");
console.log(text); // Hello, world!

Для загрузки и парсинга CSV-файла:

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

Этот модуль имеет встроенную поддержку парсинга JSON, CSV и TSV. Вы можете парсить дополнительные форматы, используя text напрямую. (Этот модуль заменил d3-request.)

Установка

Если вы используете npm, npm install d3-fetch. Вы также можете скачать последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-fetch из Skypack:

<script type="module">

import {csv} from "https://cdn.skypack.dev/d3-fetch@3";

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

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-fetch с npm-базированного CDN, такого как jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-fetch@3"></script>
<script>

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

</script>

Справочник по API

d3.blob(input[, init]) · Исходный код

Загружает бинарный файл по указанному URL input в виде объекта Blob. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.

d3.buffer(input[, init]) · Исходный код

Загружает бинарный файл по указанному URL input в виде ArrayBuffer. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.

d3.csv(input[, init][, row]) · Исходный код

Эквивалентно d3.dsv с запятой в качестве разделителя.

d3.dsv(delimiter, input[, init][, row]) · Исходный код

Загружает файл DSV по указанному URL input. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей. Дополнительная функция преобразования row может быть указана для сопоставления и фильтрации объектов строки для более конкретного представления; см. dsv.parse для подробностей. Например:

const data = await d3.dsv(",", "test.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
  };
});

Если указан только один из init и row, он интерпретируется как функция преобразования row, если это функция, а иначе — объект init.

См. также d3.csv и d3.tsv.

d3.html(input[, init]) · Исходный код

Загружает файл по указанному URL input как текст, а затем парсит его как HTML. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.

d3.image(input[, init]) · Исходный код

Загружает изображение по указанному URL input. Если указан init, задаются дополнительные свойства изображения перед загрузкой. Например, для включения анонимного кросс-доменного запроса:

const img = await d3.image("https://example.com/test.png", {crossOrigin: "anonymous"});

d3.json(input[, init]) · Исходный код

Загружает JSON файл по указанному URL input. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей. Если сервер возвращает код состояния 204 No Content или 205 Reset Content, обещание разрешается в undefined.

d3.svg(input[, init]) · Исходный код

Загружает файл по указанному URL input как текст, а затем парсит его как SVG. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.

d3.text(input[, init]) · Исходный код

Загружает текстовый файл по указанному URL input. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.

d3.tsv(input[, init][, row]) · Исходный код

Эквивалентно d3.dsv с табуляцией в качестве разделителя.

d3.xml(input[, init]) · Исходный код

Загружает файл по указанному URL input как текст, а затем парсит его как XML. Если указан init, он передаётся в вызов fetch; см. RequestInit для разрешённых полей.