使用unipept-visualizations.js时Sunburst未定义错误排查

安全阿岳

2026-7-3

问题描述

我想复现一个简单旭日图，编写了如下HTML代码，但运行时出现错误：Uncaught ReferenceError: Sunburst is not defined。我很困惑，因为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>

解决方案

以下是几种可能的原因及对应修复方式：

命名空间未正确引用：unipept-visualizations库可能没有将Sunburst直接暴露在全局作用域，而是封装在特定命名空间下。尝试使用Unipept.Sunburst代替全局Sunburst：
```
new Unipept.Sunburst(simpleSunburst, family);
```
模块格式不兼容：你引用的CDN文件可能是ES模块格式，而非全局兼容的UMD格式。可以尝试切换到UMD版本的脚本（如果库提供的话）：
```
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/unipept-visualizations@latest/dist/unipept-visualizations.umd.js"></script>
```
或者将脚本标记为模块类型：
```
<script type="module" src="https://cdn.jsdelivr.net/npm/unipept-visualizations@latest/dist/unipept-visualizations.js"></script>
```
并调整你的代码为ES模块语法（比如使用import引入Sunburst）。
版本差异问题：@latest版本可能重构了API，导致Sunburst的导出方式变化。可以尝试使用和示例页面一致的具体版本号，避免版本兼容问题。
脚本加载失败：打开浏览器开发者工具的网络面板，确认unipept-visualizations.js是否成功加载。如果加载失败，检查CDN链接是否有效，或者尝试刷新页面重新加载。

内容的提问来源于stack exchange，提问作者Chris