生成 D3.js 知识图谱可视化代码,支持层级树形结构。当用户提到知识图谱、knowledge graph、树形图、层级可视化、D3 树图、知识结构图时使用。
将用户的主题、大纲或结构化数据转换为 D3.js 力导向图可视化代码。
根据用户输入自动判断类型:
| 输入形式 | 特征 | 处理方式 |
|---|---|---|
| 主题描述 | 简短文本,如"机器学习算法分类" | 根据主题生成合理的层级结构 |
| 文本大纲 | 缩进列表或 Markdown 列表 | 解析缩进层级,转成结构化数据 |
| JSON/YAML | 明确的 {name, children} 结构 | 直接使用 |
统一转换为以下格式:
const knowledgeData = {
name: "根节点名称",
nameEn: "Root Name", // 可选
children: [
{
name: "子节点",
children: [...] // 递归嵌套
}
]
};
可选属性:
url: 点击跳转链接visualLevel: 1-5 的可视化级别(影响颜色)highlight: true/false 是否高亮询问用户需要哪种输出:
生成代码时默认包含:
询问用户是否需要调整:
详细代码模板见 references/d3-template.md
示例 1:主题描述
用户:帮我生成一个"前端技术栈"的知识图谱
→ 自动生成 HTML/CSS/JavaScript → React/Vue/Angular → ... 的层级结构
示例 2:文本大纲
用户:
数据库
关系型
MySQL
PostgreSQL
NoSQL
MongoDB
Redis
→ 解析缩进,生成结构化数据
示例 3:JSON 数据
用户:这是我的数据结构,帮我转成图谱
{ "name": "A", "children": [...] }
→ 直接使用,生成可视化