feat(knowledge-graph): 新增 Sigma.js WebGL 与 react-force-graph-2d 图谱渲染器，四引擎并存切换 - #522
Merged
ThreeFish-AI merged 4 commits intoMay 11, 2026
Merged
Conversation
深度调研全网知识图谱可视化方案后，选定两个显著优于当前 Cytoscape + d3-force 的渲染器并存实现： - Sigma.js v3 + graphology：WebGL 渲染引擎，10-100x 性能提升，ForceAtlas2 布局 - react-force-graph-2d：原生 React 组件，d3-force-3d 物理，粒子流动视觉效果 变更要点： - 新建 SigmaGraphCanvas.tsx（WebGL 渲染器，graphology 数据结构，动态导入避免 SSR 问题） - 新建 ForceGraphCanvas.tsx（Canvas 渲染器，自定义 nodeCanvasObject，粒子效果） - 抽取共享类型 types.ts（GraphCanvasNode/Edge/Props），GraphCanvas 改为引用共享类型 - page.tsx 扩展 renderer 为四选一切换（Cytoscape | d3-force | Sigma | Force Graph） - 所有渲染器均支持：节点点击/选中高亮/双击增量子图加载/暗色主题 🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist) Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
ThreeFish-AI
changed the title
- 将 ResizeObserver 提升为 roRef，在 useEffect cleanup 中正确 disconnect， 修复 async init() 内 return cleanup 永远不执行的资源泄漏； - 在 buildGraph 及数据同步 Effect 的 addNode 阶段同时写入 __origType/__origCommunity， 消除 Effect #3 读取未初始化属性导致的 fallback 默认色覆盖问题； - 删除已不再需要的独立 Effect #4（原保存原始属性）。 🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist) Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
合并远程 feature/1.x.x 分支，解决以下冲突： - page.tsx: 合并 5 种渲染引擎切换（Cytoscape / d3-force / 3D / Sigma / Force Graph）； - package.json: 同时保留 react-force-graph-2d 与 react-force-graph-3d 依赖； - pnpm-lock.yaml: 由 pnpm install --lockfile-only 自动合并。 🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist) Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
合并 feature/1.x.x 时未消除两处 import dynamic from "next/dynamic" （line 4 与 line 18），导致 TypeScript 编译与 Turbopack 构建均报 Duplicate identifier 错误。 🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist) Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
核心变更
新增两个图谱渲染器：
SigmaGraphCanvas — Sigma.js v3 + graphology WebGL 渲染器
doubleClickNode事件支持增量子图加载ForceGraphCanvas — react-force-graph-2d Canvas 渲染器
linkDirectionalParticles）nodeCanvasObject实现圆形 + 标签渲染工程改进：
types.ts（GraphCanvasNode/GraphCanvasEdge/GraphCanvasProps），四个渲染器统一接口next/dynamic+ssr: false动态导入，code-split 不影响主包体积依赖新增：
sigma@^3.0.3、graphology@^0.26.0、graphology-layout-forceatlas2@^0.10.1、react-force-graph-2d@^1.29.1风险与回滚
sigma.kill()）；react-force-graph 会 mutate 数据对象（已做深拷贝防护）git revert即可，不涉及数据库或后端变更验证证据
pnpm typecheck通过（0 error）pnpm lint通过（0 warning）影响范围
apps/negentropy-ui/app/knowledge/graph/下 5 个文件变更 + 3 个新建文件，package.json新增 4 个运行时依赖Next Best Action
🤖 Generated with Claude Code, CodeX, Gemini