web-dev-qa-db-fra.com

Le code dans le rappel d3.json () n'est pas exécuté

J'essaie de charger un fichier GeoJSON et de dessiner des graphiques en l'utilisant comme base avec D3 v5.

Le problème est que le navigateur ignore tout ce qui est inclus dans l'appel d3.json(). J'ai essayé d'insérer des points d'arrêt pour tester, mais le navigateur les ignore et je n'arrive pas à comprendre pourquoi.

Extrait de code ci-dessous.

d3.json("/trip_animate/tripData.geojson", function(data) {

  console.log("It just works");  // This never logs to console.

  //...all the rest
}

Le code continue à partir de la fonction console.log() initiale, mais je l'ai omis entièrement car je soupçonne que le problème vient de l'appel d3.json Lui-même.

javascriptd3.js
25
camelCaseCowboy

La signature de d3.json a changé de D3 v4 à v5. Il a été déplacé du module d3-request maintenant obsolète vers le nouveau module d3-fetch . Depuis la version 5, D3 utilise Fetch API en faveur de l'ancien XMLHttpRequest et a à son tour adopté l'utilisation de Promises pour gérer ces requêtes asynchrones.

Le deuxième argument de d3.json() n'est plus le rappel gérant la demande mais un objet optionnel RequestInit . d3.json() renverra maintenant une promesse que vous pouvez gérer dans sa méthode .then() .

Votre code devient ainsi:

d3.json("/trip_animate/tripData.geojson")
  .then(function(data){
    // Code from your callback goes here...
  });

La gestion des erreurs de l'appel a également changé avec l'introduction de l'API Fetch. Les versions antérieures à la v5 utilisaient le premier paramètre du rappel passé à d3.json() pour gérer les erreurs:

d3.json(url, function(error, data) { 
  if (error) throw error;
  // Normal handling beyond this point.
});

Depuis D3 v5, la promesse renvoyée par d3.json() sera rejetée en cas d'erreur. Par conséquent, les méthodes Vanilla JS pour gérer ces rejets peuvent être appliquées:

  1. Passez un gestionnaire de rejet comme deuxième argument à .then(onFulfilled, onRejected).

  2. Utilisez .catch(onRejected) pour ajouter un gestionnaire de rejet à la promesse.

En appliquant la deuxième solution, votre code devient ainsi

d3.json("/trip_animate/tripData.geojson")
  .then(function(data) {
    // Code from your callback goes here...
  })
  .catch(function(error) {
    // Do some error handling.
  });
59
altocumulus