D3.js - API запросов

D3.js предоставляет API запросов для выполнения XMLHttpRequest. В этой главе подробно описываются различные API запросов.

XMLHttpRequest

XMLHttpRequest - это встроенный http-клиент для имитации объекта XMLHttpRequest браузера. Его можно использовать с JS, разработанным для браузеров, чтобы улучшить повторное использование кода и разрешить использование существующих библиотек.

Вы можете включить модуль в свой проект и использовать его как объект XHR на основе браузера, как описано ниже.

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

Он поддерживает как асинхронные, так и синхронные запросы, а также выполняет запросы GET, POST, PUT и DELETE.

Настройка запросов

Вы можете загрузить прямо с «d3js.org», используя сценарий ниже.

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

Здесь API запросов имеет встроенную поддержку синтаксического анализа JSON, CSV и TSV. Вы можете анализировать дополнительные форматы, используя запрос или текст напрямую.

Загрузить текстовые файлы

Чтобы загрузить текстовый файл, используйте следующий синтаксис.

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text); 
});

Анализ файлов CSV

Чтобы загрузить и проанализировать файл CSV, используйте следующий синтаксис.

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data); 
});

Точно так же вы можете загрузить файлы JSON и TSV.

Рабочий пример

Давайте рассмотрим простой пример того, как загрузить и проанализировать файл CSV. Перед этим вам необходимо создать CSV-файл с именем «sample.csv» в папке приложения d3, как показано ниже.

Num1,Num2
1,2
3,4
5,6
7,8
9,10

Теперь создайте веб-страницу «requests.html», используя следующий скрипт.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data); 
         });
      </script>
   </body>
</html>

Теперь запросите браузер, и вы увидите следующий ответ:

Запросы методов API

Ниже приведены некоторые из наиболее часто используемых методов API запросов.

d3.request (url [, обратный вызов])
request.header (имя [, значение])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (метод [, данные])
request.abort()
d3.csv (URL [[, строка], обратный вызов])

Давайте теперь кратко обсудим каждый из них.

d3.request (url [, обратный вызов])

Он возвращает новый запрос для данного URL. Если назначен обратный вызов, он считается вызывающим запросом, в противном случае запрос еще не вызван. Это определено ниже.

d3.request(url)
   .get(callback);

Вы можете опубликовать некоторые параметры запроса, используя следующий синтаксис.

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

Если вы хотите указать заголовок запроса или MIME-тип, вы не должны указывать обратный вызов конструктору.

request.header (имя [, значение])

Он используется для установки значения в заголовок запроса с указанным именем. Если значение не указано, он удаляет заголовок запроса с указанным именем. Это определено ниже.

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

Здесь заголовок X-Requested-With для XMLHttpRequest является запросом по умолчанию.

request.mimeType ([тип])

Он используется для присвоения типа пантомимы заданному значению. Это определено ниже.

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

request.user ([значение])

Он используется для назначения имени пользователя для аутентификации. Если имя пользователя не указано, по умолчанию используется значение null.

request.password ([значение])

Если значение указано, оно устанавливает пароль для аутентификации.

request.timeout ([тайм-аут])

Если указан тайм-аут, он устанавливает тайм-аут на указанное количество миллисекунд.

request.get ([данные])

Этот метод используется для отправки запроса методом GET. Это определено ниже.

request.send("GET", data, callback);

request.post ([данные])

Этот метод используется для отправки запроса методом POST. Это определено ниже.

request.send("POST", data, callback);

request.send (метод [, данные])

Этот метод используется для отправки запроса с использованием данного метода GET или POST.

request.abort ()

Этот метод используется для отмены запроса.

d3.csv (URL [[, строка], обратный вызов])

Возвращает новый запрос CSV-файла по указанному URL-адресу с Mime-типом text / csv по умолчанию. Следующий синтаксис показан без обратного вызова.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

Если вы укажете обратный вызов с помощью метода POST, он определен ниже.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

пример

Создайте файл CSV с именем «lang.csv» в каталоге корневой папки приложения d3 и добавьте в него следующие изменения.

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

Создайте веб-страницу «csv.html» и добавьте к ней следующий скрипт.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий ответ.