不执行d3.json（）回调中的代码 [英] Code within d3.json() callback is not executed

问题描述

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

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

问题是浏览器正在跳过 d3.json（）调用中包含的所有内容。我尝试插入断点进行测试，但浏览器会跳过它们，我无法弄清楚原因。

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("/trip_animate/tripData.geojson", function(data) {

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

  //...all the rest
}

代码从最初的 console.log（）继续，但我省略了所有这些，因为我怀疑问题是在 d3.json 自行调用。

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

推荐答案

d3.json 从D3 v4改为到v5。它已从现已弃用模块d3-请求新的 d3-fetch 模块。从v5开始D3使用获取API ，支持旧的 XMLHttpRequest ，并依次采用使用承诺来处理这些异步请求。

The signature of d3.json has changed from D3 v4 to v5. It has been moved from the now deprecated module d3-request to the new d3-fetch module. As of v5 D3 uses the Fetch API in favor of the older XMLHttpRequest and has in turn adopted the use of Promises to handle those asynchronous requests.

d3.json（）的第二个参数不再是处理请求的回调，而是一个可选的 RequestInit 对象。 d3.json（）现在将返回一个你可以在 .then（） method。

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

您的代码因此变为：

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

这篇关于不执行d3.json（）回调中的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！