D3.js - Richieste API

D3.js fornisce un'API di richiesta per eseguire XMLHttpRequest. Questo capitolo spiega in dettaglio le varie API delle richieste.

XMLHttpRequest

XMLHttpRequest è il client http integrato per emulare l'oggetto XMLHttpRequest del browser. Può essere utilizzato con JS progettato per i browser per migliorare il riutilizzo del codice e consentire l'uso delle librerie esistenti.

È possibile includere il modulo nel progetto e utilizzarlo come oggetto XHR basato su browser come spiegato di seguito.

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

Supporta sia richieste asincrone che sincrone ed esegue richieste GET, POST, PUT e DELETE.

Configurazione delle richieste

Puoi caricare direttamente da "d3js.org" utilizzando lo script seguente.

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

Qui, l'API delle richieste ha il supporto integrato per l'analisi di JSON, CSV e TSV. È possibile analizzare formati aggiuntivi utilizzando direttamente la richiesta o il testo.

Carica file di testo

Per caricare un file di testo, utilizzare la seguente sintassi.

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

Analisi dei file CSV

Per caricare e analizzare un file CSV, utilizzare la seguente sintassi.

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

Allo stesso modo, puoi caricare anche i file JSON e TSV.

Esempio di lavoro

Vediamo un semplice esempio di come caricare e analizzare un file CSV. Prima di ciò, è necessario creare un file CSV denominato "sample.csv" nella cartella dell'applicazione d3 come mostrato di seguito.

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

Ora, crea una pagina web "requests.html" utilizzando il seguente 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>

Ora, richiedi il browser e vedrai la seguente risposta,

Richiede metodi API

Di seguito sono riportati alcuni dei metodi API Requests più comunemente utilizzati.

  • d3.request (url [, callback])
  • request.header (nome [, valore])
  • request.mimeType([type])
  • request.user([value])
  • request.password([value])
  • request.timeout([timeout])
  • request.get([data])
  • request.post([data])
  • request.send (metodo [, dati])
  • request.abort()
  • d3.csv (url [[, row], callback])

Parliamo ora brevemente di ciascuno di questi.

d3.request (url [, callback])

Restituisce una nuova richiesta per l'URL fornito. Se viene assegnata una richiamata, viene considerata come una richiesta di chiamata altrimenti la richiesta non è ancora chiamata. È definito di seguito.

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

È possibile pubblicare alcuni parametri di query utilizzando la sintassi seguente.

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 desideri specificare un'intestazione della richiesta o un tipo MIME, non devi specificare una richiamata al costruttore.

request.header (nome [, valore])

Viene utilizzato per impostare il valore nell'intestazione della richiesta con il nome specificato. Se non viene specificato alcun valore, rimuove l'intestazione della richiesta con il nome specificato. È definito di seguito.

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

Qui, l'intestazione X-Requested-With di XMLHttpRequest è una richiesta predefinita.

request.mimeType ([tipo])

Viene utilizzato per assegnare il tipo MIME al valore specificato. È definito di seguito.

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

request.user ([value])

Viene utilizzato per assegnare il nome utente per l'autenticazione. Se un nome utente non è specificato, il valore predefinito è null.

request.password ([valore])

Se viene specificato un valore, imposta la password per l'autenticazione.

request.timeout ([timeout])

Se viene specificato un timeout, imposta il timeout sul numero di millisecondi specificato.

request.get ([dati])

Questo metodo viene utilizzato per inviare la richiesta con il metodo GET. È definito di seguito.

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

request.post ([data])

Questo metodo viene utilizzato per inviare la richiesta con il metodo POST. È definito di seguito.

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

request.send (metodo [, dati])

Questo metodo viene utilizzato per inviare la richiesta utilizzando il metodo GET o POST specificato.

request.abort ()

Questo metodo viene utilizzato per interrompere la richiesta.

d3.csv (url [[, row], callback])

Restituisce una nuova richiesta per il file CSV all'URL specificato con il tipo Mime predefinito text / csv. La seguente sintassi viene visualizzata senza richiamata.

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

Se si specifica una richiamata con il metodo POST, viene definita di seguito.

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

Esempio

Crea un file csv denominato "lang.csv" nella directory della cartella principale dell'applicazione d3 e aggiungi le seguenti modifiche.

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

Creare una pagina web "csv.html" e aggiungervi il seguente 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>

Ora, richiedi il browser e vedremo la seguente risposta.