El código dentro de la callback d3.json () no se ejecuta

Estoy intentando cargar un archivo GeoJSON y dibujar algunos gráficos usándolo como base con D3 v5 .

El problema es que el navegador omite todo lo incluido en la llamada d3.json() . Intenté insertar puntos de ruptura para probar, pero el navegador se salteó sobre ellos y no puedo entender por qué.

Fragmento de código a continuación.

 d3.json("/trip_animate/tripData.geojson", function(data) { console.log("It just works"); // This never logs to console. //...all the rest } 

El código continúa desde el console.log() inicial, pero lo omití porque sospecho que el problema está con la llamada d3.json .

La firma de d3.json ha cambiado de D3 v4 a v5. Se ha movido desde la ahora obsoleta solicitud del módulo d3 al nuevo módulo d3-fetch . A partir de v5, D3 utiliza la API de obtención a favor de XMLHttpRequest anterior y, a su vez, ha adoptado el uso de Promises para gestionar esas solicitudes asincrónicas.

El segundo argumento para d3.json() ya no es la callback que maneja la solicitud sino un objeto RequestInit opcional. d3.json() ahora devolverá una promesa que puede manejar en su método .then() .

Su código se convierte así:

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