D3.js - API Requests

D3.js fournit une API de requête pour exécuter la XMLHttpRequest. Ce chapitre explique en détail les différentes API de requêtes.

XMLHttpRequest

XMLHttpRequest est le client http intégré pour émuler l'objet XMLHttpRequest du navigateur. Il peut être utilisé avec JS conçu pour les navigateurs afin d'améliorer la réutilisation du code et permettre l'utilisation de bibliothèques existantes.

Vous pouvez inclure le module dans votre projet et l'utiliser comme objet XHR basé sur un navigateur comme expliqué ci-dessous.

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

Il prend en charge les requêtes asynchrones et synchrones et il exécute les requêtes GET, POST, PUT et DELETE.

Configurer les demandes

Vous pouvez charger directement depuis «d3js.org» en utilisant le script ci-dessous.

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

Ici, l'API de requêtes a un support intégré pour l'analyse JSON, CSV et TSV. Vous pouvez analyser des formats supplémentaires en utilisant directement la requête ou le texte.

Charger des fichiers texte

Pour charger un fichier texte, utilisez la syntaxe suivante.

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

Analyse des fichiers CSV

Pour charger et analyser un fichier CSV, utilisez la syntaxe suivante.

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

De même, vous pouvez également charger les fichiers JSON et TSV.

Exemple de travail

Passons en revue un exemple simple pour savoir comment charger et analyser un fichier CSV. Avant cela, vous devez créer un fichier CSV nommé «sample.csv» dans votre dossier d'application d3 comme indiqué ci-dessous.

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

Maintenant, créez une page Web «requests.html» en utilisant le script suivant.

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

Maintenant, demandez le navigateur et vous verrez la réponse suivante,

Requêtes méthodes API

Voici quelques-unes des méthodes d'API Requests les plus couramment utilisées.

d3.request (url [, rappel])
request.header (nom [, valeur])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (méthode [, données])
request.abort()
d3.csv (url [[, ligne], rappel])

Examinons maintenant chacun de ces points brièvement.

d3.request (url [, rappel])

Il renvoie une nouvelle requête pour l'URL donnée. Si un rappel est attribué, il est considéré comme une demande d'appel, sinon la demande n'est pas encore appelée. Il est défini ci-dessous.

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

Vous pouvez publier certains paramètres de requête en utilisant la syntaxe suivante.

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 vous souhaitez spécifier un en-tête de demande ou un type mime, vous ne devez pas spécifier de rappel au constructeur.

request.header (nom [, valeur])

Il est utilisé pour définir la valeur de l'en-tête de la demande avec le nom spécifié. Si aucune valeur n'est spécifiée, il supprime l'en-tête de la demande avec le nom spécifié. Il est défini ci-dessous.

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

Ici, l'en-tête X-Requested-With vers XMLHttpRequest est une requête par défaut.

request.mimeType ([type])

Il est utilisé pour affecter le type mime à la valeur donnée. Il est défini ci-dessous.

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

request.user ([valeur])

Il est utilisé pour attribuer le nom d'utilisateur pour l'authentification. Si aucun nom d'utilisateur n'est spécifié, la valeur par défaut est null.

request.password ([valeur])

Si une valeur est spécifiée, il définit le mot de passe pour l'authentification.

request.timeout ([timeout])

Si un délai d'expiration est spécifié, il définit le délai d'expiration sur le nombre spécifié de millisecondes.

request.get ([données])

Cette méthode est utilisée pour envoyer la requête avec la méthode GET. Il est défini ci-dessous.

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

request.post ([données])

Cette méthode est utilisée pour envoyer la requête avec la méthode POST. Il est défini ci-dessous.

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

request.send (méthode [, données])

Cette méthode est utilisée pour envoyer la requête à l'aide de la méthode GET ou POST donnée.

request.abort ()

Cette méthode est utilisée pour abandonner la demande.

d3.csv (url [[, ligne], rappel])

Renvoie une nouvelle demande pour le fichier CSV à l'URL spécifiée avec le type Mime par défaut text / csv. La syntaxe suivante s'affiche sans rappel.

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

Si vous spécifiez un rappel avec la méthode POST, il est défini ci-dessous.

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

Exemple

Créez un fichier csv nommé «lang.csv» dans le répertoire du dossier racine de votre application d3 et ajoutez-y les modifications suivantes.

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

Créez une page Web «csv.html» et ajoutez-y le script suivant.

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

Maintenant, demandez le navigateur et nous verrons la réponse suivante.