Код в обратном вызове d3.json() не выполняется

Я пытаюсь загрузить файл GeoJSON и рисовать некоторые графики, используя его в качестве основы с D3 v5.

Проблема в том, что браузер пропускает все, что входит в d3.json(). Я попытался вставить точки останова, чтобы проверить, но браузер пропускает их, и я не могу понять, почему.

Ниже приведен фрагмент кода.

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

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

  //...all the rest
}

Код продолжается с начального console.log(), но я пропустил все это, так как я подозреваю, что проблема d3.json с d3.json вызовом d3.json.

Ответ 1

Подпись d3.json изменилась с D3 v4 на v5. Он был перенесен из теперь устаревшего модуля d3-запроса в новый модуль d3-fetch. Начиная с версии 5 D3 использует API-интерфейс Fetch в пользу более старого XMLHttpRequest и, в свою очередь, использовал Promise для обработки этих асинхронных запросов.

Второй аргумент d3.json() больше не является обратным обработкой запроса, а необязательным объектом RequestInit. d3.json() вернет обещание, которое вы можете обработать в его методе .then().

Таким образом, ваш код будет выглядеть следующим образом:

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