D3.js - API de solicitações

D3.js fornece uma API de solicitação para realizar o XMLHttpRequest. Este capítulo explica as várias APIs de solicitações em detalhes.

XMLHttpRequest

XMLHttpRequest é o cliente http integrado para emular o objeto XMLHttpRequest do navegador. Ele pode ser usado com JS projetado para navegadores para melhorar a reutilização de código e permitir o uso de bibliotecas existentes.

Você pode incluir o módulo em seu projeto e usá-lo como o objeto XHR baseado em navegador, conforme explicado abaixo.

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

Ele oferece suporte a solicitações assíncronas e síncronas e executa solicitações GET, POST, PUT e DELETE.

Configurando solicitações

Você pode carregar diretamente de “d3js.org” usando o script abaixo.

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

Aqui, a API de solicitações tem suporte integrado para analisar JSON, CSV e TSV. Você pode analisar formatos adicionais usando a solicitação ou texto diretamente.

Carregar arquivos de texto

Para carregar um arquivo de texto, use a seguinte sintaxe.

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

Analisando arquivos CSV

Para carregar e analisar um arquivo CSV, use a seguinte sintaxe.

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

Da mesma forma, você também pode carregar os arquivos JSON e TSV.

Exemplo de Trabalho

Vejamos um exemplo simples de como carregar e analisar um arquivo CSV. Antes disso, você precisa criar um arquivo CSV denominado “sample.csv” na pasta do seu aplicativo d3 conforme mostrado abaixo.

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

Agora, crie uma página da web “requests.html” usando o seguinte script.

<!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>

Agora, solicite o navegador e você verá a seguinte resposta,

Métodos de API de solicitações

A seguir estão alguns dos métodos de API de solicitações mais usados.

d3.request (url [, callback])
request.header (nome [, valor])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (método [, dados])
request.abort()
d3.csv (url [[, linha], retorno de chamada])

Vamos agora discutir cada um deles brevemente.

d3.request (url [, callback])

Ele retorna uma nova solicitação para o URL fornecido. Se um retorno de chamada for atribuído, será considerado como uma solicitação de chamada, caso contrário, a solicitação ainda não foi chamada. É definido abaixo.

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

Você pode postar alguns parâmetros de consulta usando a seguinte sintaxe.

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

Se você deseja especificar um cabeçalho de solicitação ou um tipo MIME, você não deve especificar um retorno de chamada para o construtor.

request.header (nome [, valor])

É usado para definir o valor do cabeçalho da solicitação com o nome especificado. Se nenhum valor for especificado, ele remove o cabeçalho da solicitação com o nome especificado. É definido abaixo.

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

Aqui, o cabeçalho X-Requested-With para XMLHttpRequest é uma solicitação padrão.

request.mimeType ([type])

É usado para atribuir o tipo MIME a um determinado valor. É definido abaixo.

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

request.user ([value])

É usado para atribuir o nome de usuário para autenticação. Se um nome de usuário não for especificado, o padrão é nulo.

request.password ([value])

Se um valor for especificado, ele define a senha para autenticação.

request.timeout ([timeout])

Se um tempo limite for especificado, ele definirá o tempo limite para o número especificado de milissegundos.

request.get ([dados])

Este método é usado para enviar a solicitação com o método GET. É definido abaixo.

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

request.post ([data])

Este método é usado para enviar a solicitação com o método POST. É definido abaixo.

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

request.send (método [, dados])

Este método é usado para enviar a solicitação usando o método GET ou POST fornecido.

request.abort ()

Este método é usado para abortar a solicitação.

d3.csv (url [[, linha], retorno de chamada])

Retorna uma nova solicitação para o arquivo CSV no URL especificado com o tipo Mime text / csv padrão. A sintaxe a seguir é exibida sem retorno de chamada.

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

Se você especificar um retorno de chamada com o método POST, ele será definido a seguir.

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

Exemplo

Crie um arquivo csv denominado “lang.csv” no diretório da pasta raiz do aplicativo d3 e adicione as seguintes alterações a ele.

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

Crie uma página da web “csv.html” e adicione o seguinte script a ela.

<!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>

Agora, solicite o navegador e veremos a seguinte resposta.