D3.js: API de solicitudes

D3.js proporciona una API de solicitud para realizar XMLHttpRequest. Este capítulo explica las distintas API de solicitudes en detalle.

XMLHttpRequest

XMLHttpRequest es el cliente http integrado para emular el objeto XMLHttpRequest del navegador. Se puede usar con JS diseñado para navegadores para mejorar la reutilización del código y permitir el uso de bibliotecas existentes.

Puede incluir el módulo en su proyecto y utilizarlo como el objeto XHR basado en navegador como se explica a continuación.

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

Admite solicitudes asíncronas y síncronas y realiza solicitudes GET, POST, PUT y DELETE.

Configurar solicitudes

Puede cargar directamente desde “d3js.org” usando el siguiente script.

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

Aquí, la API de solicitudes tiene soporte integrado para analizar JSON, CSV y TSV. Puede analizar formatos adicionales utilizando la solicitud o el texto directamente.

Cargar archivos de texto

Para cargar un archivo de texto, use la siguiente sintaxis.

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

Analizar archivos CSV

Para cargar y analizar un archivo CSV, use la siguiente sintaxis.

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

Del mismo modo, también puede cargar los archivos JSON y TSV.

Ejemplo de trabajo

Veamos un ejemplo simple de cómo cargar y analizar un archivo CSV. Antes de eso, debe crear un archivo CSV llamado "sample.csv" en la carpeta de su aplicación d3 como se muestra a continuación.

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

Ahora, cree una página web "request.html" utilizando el siguiente 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>

Ahora, solicite el navegador y verá la siguiente respuesta,

Métodos de API de solicitudes

A continuación se muestran algunos de los métodos de API de solicitudes más utilizados.

d3.request (url [, devolución de llamada])
request.header (nombre [, valor])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (método [, datos])
request.abort()
d3.csv (url [[, fila], devolución de llamada])

Analicemos ahora cada uno de estos brevemente.

d3.request (url [, devolución de llamada])

Devuelve una nueva solicitud para la URL dada. Si se asigna una devolución de llamada, se considera una solicitud de llamada; de lo contrario, la solicitud aún no se llama. Se define a continuación.

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

Puede publicar algunos parámetros de consulta utilizando la siguiente sintaxis.

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

Si desea especificar un encabezado de solicitud o un tipo de mime, no debe especificar una devolución de llamada al constructor.

request.header (nombre [, valor])

Se utiliza para establecer el valor del encabezado de la solicitud con el nombre especificado. Si no se especifica ningún valor, elimina el encabezado de la solicitud con el nombre especificado. Se define a continuación.

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

Aquí, el encabezado X-Requested-With para XMLHttpRequest es una solicitud predeterminada.

request.mimeType ([tipo])

Se utiliza para asignar el tipo de mímica al valor dado. Se define a continuación.

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

request.user ([valor])

Se utiliza para asignar el nombre de usuario para la autenticación. Si no se especifica un nombre de usuario, el valor predeterminado es nulo.

request.password ([valor])

Si se especifica un valor, establece la contraseña para la autenticación.

request.timeout ([tiempo de espera])

Si se especifica un tiempo de espera, establece el tiempo de espera en el número especificado de milisegundos.

request.get ([datos])

Este método se utiliza para enviar la solicitud con el método GET. Se define a continuación.

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

request.post ([datos])

Este método se utiliza para enviar la solicitud con el método POST. Se define a continuación.

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

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

Este método se utiliza para enviar la solicitud mediante el método GET o POST proporcionado.

request.abort ()

Este método se utiliza para cancelar la solicitud.

d3.csv (url [[, fila], devolución de llamada])

Devuelve una nueva solicitud para el archivo CSV en la URL especificada con el tipo de Mime predeterminado text / csv. La siguiente sintaxis se muestra sin devolución de llamada.

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

Si especifica una devolución de llamada con el método POST, se define a continuación.

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

Ejemplo

Cree un archivo csv llamado “lang.csv” en el directorio de la carpeta raíz de su aplicación d3 y agregue los siguientes cambios.

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

Cree una página web “csv.html” y agréguele el siguiente script.

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

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱