d3.json（）回调中的代码未执行

Question

我正在尝试加载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调用本身。

Answer 1

签名d3.json已经改为从D3V4到V5。它已从现已弃用的模块d3请求移至新的d3提取模块。从v5开始，D3使用Fetch
API
来支持旧版本XMLHttpRequest，并依次采用Promises来处理那些异步请求。

第二个参数d3.json()不再是处理请求的回调，而是一个可选RequestInit对象。d3.json()现在将返回您可以使用其.then()方法处理的Promise 。

这样，您的代码将变为：

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

调用的错误处理也随着Fetch API的引入而发生了变化。v5之前的版本使用传递给的回调的第一个参数d3.json()来处理错误：

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

从D3 v5开始，d3.json()如果遇到错误，将拒绝由返回的承诺。因此，可以应用处理这些拒绝的普通JS方法：

1. 将拒绝处理程序作为第二个参数传递给.then(onFulfilled, onRejected)。

2. 用于.catch(onRejected)向承诺中添加拒绝处理程序。

应用第二个解决方案，您的代码就变成了

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