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有changed。它已从现已弃用的模块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...
  });

Answer 2

由于所有答案都没有帮助，我不得不自己找到有效的解决方案。我正在使用 v4，必须坚持使用。问题是（在我的情况下）d3.json 第一次工作，但第二次或第三次没有工作（使用 HTML 下拉菜单）。

想法是使用初始函数，然后简单地使用第二个函数

let data = await d3.json("URL");

代替

d3.json("URL", function(data) {

因此，一般模式变为：

async function drawWordcloudGraph() {
    let data = await d3.json("URL");
    ...
}


function initialFunction() {
    d3.json("URL", function (data) {
        ...
    });
}

initialFunction();

我尝试了几种方法，只有这种方法有效。不确定是否可以简化，请自行测试。

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

2 个答案: