Pourquoi mon code dans le rappel d3.json() ne s'exécute-t-il pas dans D3 v5 ?

Interruption de l'exécution du code dans le rappel d3.json()

Dans D3 v5, le code dans le rappel d3.json() ne s'exécute pas, laissant les développeurs perplexes. Cet écart est apparu en raison de changements importants dans la signature de d3.json() depuis D3 v4.

Migration vers Promises dans D3 v5

D3 v5 a abandonné XMLHttpRequest et a adopté l'API Fetch, favorisant Promesse de gérer les requêtes asynchrones. Par conséquent, le deuxième argument de d3.json() n'est plus le rappel responsable du traitement de la requête. Au lieu de cela, il sert d’objet RequestInit facultatif. En conséquence, d3.json() renvoie désormais une promesse qui peut être manipulée à l'aide de sa méthode .then().

Code révisé pour la gestion des requêtes asynchrones

Pour résoudre le problème, votre code doit être modifié comme suit :

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

Gestion des erreurs dans D3 v5

La gestion des erreurs a également subi des modifications dans D3 v5. Dans les versions précédentes, les erreurs étaient signalées via le premier paramètre du rappel transmis à d3.json(). Cependant, dans D3 v5, la promesse renvoyée par d3.json() sera rejetée si une erreur se produit. Cela permet d'utiliser les mécanismes de gestion des erreurs Vanilla JS :

Utilisation du gestionnaire de rejet comme deuxième argument pour .then()

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

Utilisation de .catch( ) pour gérer les refus

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!