我正在尝试从此页面重现简单的旭日：-
https://observablehq.com/@unipept/sunburst-example
我创建了下面的 html，但由于某种原因，当我在 Visual Studio 中运行它时，我得到：-
未捕获的 ReferenceError ReferenceError：Sunburst 未定义
...我不太明白，因为 Sunburst 函数是在 unipept-visualizations.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>
使用
new UnipeptVisualizations.Sunburst(simpleSunburst, family);<!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 UnipeptVisualizations.Sunburst(simpleSunburst, family);
});
</script>
</body>
</html>