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

Question

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

问题是浏览器跳过了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，并反过来采用 Promise 来处理这些异步请求。

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

因此，您的代码将变为：

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.
});

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();

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