我试着从这一页重现简单的日出:
https://observablehq.com/@unipept/sunburst-example个
我创建了下面的html，但由于某种原因，当我在Visual Studio中运行它时，我得到:
未捕获引用Error ReferenceError:未定义SunBurst
...这一点我不太理解，因为SunBurst函数是在unipept-visalizations.js文件中定义的.这里可能出了什么问题？
<!DOCTYPE html>
<html>
<head>
<title>Sunburst Visualization</title>
</head>
<body>
<div id="simpleSunburst"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/unipept-visualizations@latest/dist/unipept-visualizations.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const family = {
"id": 1,
"name": "John",
"children": [
{
"id": 2,
"name": "Sarah",
"children": [
{
"id": 11,
"name": "Lary",
"children": [
{
"id": 15,
"name": "George",
"children": [],
"count": 1,
"selfCount": 1
}
],
"count": 2,
"selfCount": 1
},
{
"id": 12,
"name": "Susan",
"children": [
{
"id": 13,
"name": "Martha",
"children": [],
"count": 1,
"selfCount": 1
},
{
"id": 14,
"name": "Zack",
"children": [],
"count": 1,
"selfCount": 1
}
],
"count": 3,
"selfCount": 1
}
],
"count": 6,
"selfCount": 1
},
{
"id": 3,
"name": "Charles",
"children": [
{
"id": 5,
"name": "Rick",
"children": [],
"count": 1,
"selfCount": 1
}
],
"count": 2,
"selfCount": 1
},
{
"id": 4,
"name": "Janet",
"children": [
{
"id": 6,
"name": "Aaron",
"children": [],
"count": 1,
"selfCount": 1
},
{
"id": 7,
"name": "Kim",
"children": [
{
"id": 8,
"name": "Patricia",
"children": [],
"count": 1,
"selfCount": 1
},
{
"id": 9,
"name": "Jack",
"children": [],
"count": 1,
"selfCount": 1
},
{
"id": 10,
"name": "Thomas",
"children": [],
"count": 1,
"selfCount": 1
}
],
"count": 4,
"selfCount": 1
}
],
"count": 6,
"selfCount": 1
}
],
"count": 15,
"selfCount": 1
};
const simpleSunburst = document.getElementById("simpleSunburst");
new Sunburst(simpleSunburst, family);
});
</script>
</body>
</html>