🖱️ 滚轮缩放
✋ 拖拽画布
👆 点击节点查看详情
🔍 双击节点跳转
<%
const graphData = { nodes: [], links: [] };
const nodeDepthMap = new Map(); // 记录节点深度
/**
* 递归生成图谱数据
* @param {Note} currentNote - 当前笔记
* @param {string|null} parentId - 父节点ID
* @param {number} depth - 当前深度
* @param {boolean} isRoot - 是否为根节点
*/
function generateForceGraphData(currentNote, parentId, depth = 0, isRoot = false) {
// 避免重复添加（处理可能的循环引用）
if (nodeDepthMap.has(currentNote.noteId)) {
// 只添加连线，不重复添加节点
if (parentId) {
graphData.links.push({
source: parentId,
target: currentNote.noteId
});
}
return;
}
nodeDepthMap.set(currentNote.noteId, depth);
const childNotes = currentNote.getVisibleChildNotes();
const categoryName = currentNote.getLabelValue("categoryName");
// 判断节点类型
let nodeType = 'article';
if (isRoot) {
nodeType = 'root';
} else if (childNotes.length > 3) {
nodeType = 'category'; // 子节点多的视为分类
}
// 添加节点
graphData.nodes.push({
id: currentNote.noteId,
shareId: currentNote.shareId,
name: currentNote.title,
childCount: childNotes.length,
depth: depth,
type: nodeType,
category: categoryName || ''
});
// 添加连线
if (parentId) {
graphData.links.push({
source: parentId,
target: currentNote.noteId
});
}
// 递归处理子节点
childNotes.forEach(child => {
generateForceGraphData(child, currentNote.noteId, depth + 1, false);
});
}
/**
* 查找首页笔记
* 遍历 subRoot 的子节点，找到 categoryName === "首页" 的笔记
*/
function findHomePage() {
if (!subRoot || !subRoot.note) return null;
const children = subRoot.note.getVisibleChildNotes();
for (const child of children) {
if (child.getLabelValue("categoryName") === "首页") {
return child;
}
}
// 如果没找到，尝试用索引 [5]（根据你的模板结构）
return children[5] || children[0] || null;
}
// 从首页开始构建图谱
const homePage = findHomePage();
if (homePage) {
generateForceGraphData(homePage, null, 0, true);
}
// 统计信息
const totalNodes = graphData.nodes.length;
const maxDepth = Math.max(...Array.from(nodeDepthMap.values()), 0);
%>
```
---
**项目分区导航**：⬅️ [[01-design - “筑迹”|01-design - “筑迹”]] | 02-参考（图谱） | ➡️ [[03-参考（地图）|03-参考（地图）]]