我正在尝试加载GeoJSON文件并使用它作为D3 v5 的基础绘制一些图形。
问题在于浏览器正在跳过d3.json()调用中包含的所有内容。我尝试插入断点进行测试,但是浏览器跳过了它们,我无法弄清原因。
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调用本身。
console.log()
d3.json
签名d3.json已经改为从D3V4到V5。它已从现已弃用的模块d3请求移至新的d3提取模块。从v5开始,D3使用Fetch API来支持旧版本XMLHttpRequest,并依次采用Promises来处理那些异步请求。
XMLHttpRequest
第二个参数d3.json()不再是处理请求的回调,而是一个可选RequestInit对象。d3.json()现在将返回您可以使用其.then()方法处理的Promise 。
RequestInit
.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方法:
将拒绝处理程序作为第二个参数传递给.then(onFulfilled, onRejected)。
.then(onFulfilled, onRejected)
用于.catch(onRejected)向承诺中添加拒绝处理程序。
.catch(onRejected)
应用第二个解决方案,您的代码就变成了
d3.json("/trip_animate/tripData.geojson") .then(function(data) { // Code from your callback goes here... }) .catch(function(error) { // Do some error handling. });