不执行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已经改为从D3 V4到V5.它已从现已弃用的模块d3-request移至新的d3-fetch模块.从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...
  });