Учебники

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

Декабрь 25, 2018

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

Теперь создайте веб-страницу «reports.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

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

  • d3.request (url [, обратный вызов])
  • request.header (name [, value])
  • request.mimeType ([тип])
  • request.user ([значение])
  • request.password ([значение])
  • request.timeout ([Тайм-аут])
  • request.GET ([данные])
  • request.post ([данные])
  • request.send (метод [, данные])
  • request.abort ()
  • d3.csv (url [[, row], callback])

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

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 (name [, value])

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

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 [[, row], callback])

Возвращает новый запрос для файла 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>

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

40
Share: