我正在尝试学习数据可视化，我在youtube上找到了一个在线课程。我正在处理试图从sketch.js调用.json文件的课程代码，但是我坚持使用无限加载页面。我认为问题在于预加载功能，我不明白做错了什么。
这是sketch.js
var data;
function preload() {
data = loadJSON("birds.json");
}
function setup() {
noCanvas();
var bird = data.birds[1].members[2];
createP(bird);
}
这是.json文件，在线验证，因此它应该工作：
{
"description": "Birds of Antarctica, grouped by family",
"source": "https://en.wikipedia.org/wiki/List_of_birds_of_Antarctica",
"birds": [
{
"family": "Albatrosses",
"members": [
"Wandering albatross",
"Grey-headed albatross",
"Black-browed albatross",
"Sooty albatross",
"Light-mantled albatross"
]
},
{
"family": "Cormorants",
"members": [
"Antarctic shag",
"Imperial shag",
"Crozet shag"
]
},
{
"family": "Diving petrels",
"members": [
"South Georgia diving petrel",
"Common diving petrel"
]
},
{
"family": "Ducks, geese and swans",
"members": [
"Yellow-billed pintail"
]
},
{
"family": "Gulls",
"members": [
"Kelp gull"
]
},
{
"family": "Penguins",
"members": [
"King penguin",
"Emperor penguin",
"Gentoo penguin",
"Adelie penguin",
"Chinstrap penguin",
"Rockhopper penguin",
"Macaroni penguin"
]
},
{
"family": "Shearwaters and petrels",
"members": [
"Antarctic giant petrel",
"Hall's giant petrel",
"Southern fulmar",
"Antarctic petrel",
"Cape petrel",
"Snow petrel",
"Great-winged petrel",
"White-headed petrel",
"Blue petrel",
"Broad-billed prion",
"Salvin's prion",
"Antarctic prion",
"Slender-billed prion",
"Fairy prion",
"Grey petrel",
"White-chinned petrel",
"Kerguelen petrel",
"Sooty shearwater"
]
},
{
"family": "Sheathbills",
"members": [
"Snowy sheathbill"
]
},
{
"family": "Skuas and jaegers",
"members": [
"South polar skua",
"Brown skua"
]
},
{
"family": "Storm petrels",
"members": [
"Grey-backed storm petrel",
"Wilson's storm petrel",
"Black-bellied storm petrel"
]
},
{
"family": "Terns",
"members": [
"Arctic tern",
"Antarctic tern"
]
}
]
}
最后，这是我的index.html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
我真的不明白我做错了什么。
在此先感谢您的帮助。