javascript d3.json() 回调中的代码未执行

Code within d3.json() callback is not executed

提问by camelCaseCowboy

I am trying to load a GeoJSON file and to draw some graphics using it as a basis with D3 v5.

我正在尝试加载一个 GeoJSON 文件并使用它作为 D3 v5的基础绘制一些图形。

The problem is that the browser is skipping over everything included inside the d3.json()call. I tried inserting breakpoints to test but the browser skips over them and I cannot figure out why.

问题是浏览器会跳过d3.json()调用中包含的所有内容。我尝试插入断点进行测试，但浏览器跳过了它们，我不知道为什么。

Code snippet below.

下面的代码片段。

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

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

  //...all the rest
}

The code continues on from the initial console.log(), but I omitted all of it since I suspect the issue is with the d3.jsoncall itself.

代码从最初的 继续console.log()，但我省略了所有它，因为我怀疑问题出在d3.json调用本身上。

回答by altocumulus

The signature of d3.jsonhas changedfrom D3 v4 to v5. It has been moved from the now deprecated module d3-request to the new d3-fetchmodule. As of v5 D3 uses the Fetch APIin favor of the older XMLHttpRequestand has in turn adopted the use of Promisesto handle those asynchronous requests.

的签名d3.json已经改为从D3 V4到V5。它已从现已弃用的模块 d3-request 移至新的d3-fetch模块。从 v5 开始，D3 使用Fetch API来支持旧的XMLHttpRequest，并反过来采用Promises来处理这些异步请求。

The second argument to d3.json()no longer is the callback handling the request but an optional RequestInitobject. d3.json()will now return a Promise you can handle in its .then()method.

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

Your code thus becomes:

您的代码因此变为：

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

Error handling of the call has also changed with the introduction of the Fetch API. Versions prior to v5 used the first parameter of the callback passed to d3.json()to handle errors:

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

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

Since D3 v5 the promise returned by d3.json()will be rejected if an error is encountered. Hence, vanilla JS methods of handling those rejections can be applied:

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

1. Pass a rejection handler as the second argumentto .then(onFulfilled, onRejected).

2. Use .catch(onRejected)to add a rejection handler to the promise.

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

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

Applying the second solution your code thus becomes

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

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