我正在尝试从 url 获取一些数据以在 d3.js 中使用。我无法使用来获取数据d3.json(url, callback)
。虽然我使用(ES8)时效果很好async await
功能。
有人可以帮助我理解为什么吗?我究竟做错了什么?谢谢!
d3.json() 示例:
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", json => {
const data = json.data; // array of dates and values
const lowestVal = d3.min(data, d => d[1]);
const highestVal = d3.max(data, d => d[1]);
console.log(lowestVal);
console.log(highestVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
异步等待示例:
(async function() {
try {
const response = await fetch("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json");
if (response.ok) {
const jsonResponse = await response.json();
const data = jsonResponse.data; // array of dates and values
const lowestVal = d3.min(data, d => d[1]);
const highestVal = d3.max(data, d => d[1]);
console.log(lowestVal);
console.log(highestVal);
}
} catch(error) {
console.log(error);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
我知道这里也应该存在一些 CORS 问题。但我目前正在开发 CodePen。所以 CORS 在这里不是问题。
非常感谢您的任何见解。
根据文档 https://github.com/d3/d3-fetch/blob/v1.1.2/README.md#json, d3.json
返回一个承诺,比如fetch
这样做,而不是接受回调。 (编辑:显然在 v4 中它接受了回调——这解释了这一点。)如果你使用这个承诺,它就会起作用。
您可以通过以下方式使用承诺async
/await
就像你做的那样fetch
,或者通过使用then
并且(因为您不会将链条退还给任何可以处理它的其他人)catch
.
async
/await
:
(async function() {
try {
const jsonResponse = await d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json");
const data = jsonResponse.data; // array of dates and values
const lowestVal = d3.min(data, d => d[1]);
const highestVal = d3.max(data, d => d[1]);
console.log(lowestVal);
console.log(highestVal);
} catch(error) {
console.log(error);
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
then
/catch
:
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json")
.then(json => {
const data = json.data; // array of dates and values
const lowestVal = d3.min(data, d => d[1]);
const highestVal = d3.max(data, d => d[1]);
console.log(lowestVal);
console.log(highestVal);
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)