【深客松】知识图谱技术栈

知识图谱技术栈

核心可视化库

D3.js 7.9.0
d3.forceSimulation - 力导向图模拟（用于链接布局）
d3.select - DOM 选择与操作
d3.drag - 节点拖拽交互
d3.zoom - 画布缩放与平移
d3.forceLink - 链接力计算
d3.pointer - 鼠标坐标转换
SVG 路径绘制（链接曲线）

前端框架

React 19.2.3
函数组件
React Hooks：
useState - 状态管理（选中节点、悬停状态、拖拽状态等）
useRef - DOM 引用（SVG、容器、模拟器引用）
useMemo - 节点和链接数据缓存
useEffect - 副作用处理（D3 渲染、事件监听）

类型系统

TypeScript 5.8.2
类型定义（KnowledgeMapNode、KnowledgeMapLink、KnowledgeMapProps）
类型安全

渲染技术

SVG（Scalable Vector Graphics）
节点渲染（圆形、文本、图标）
链接渲染（贝塞尔曲线路径）
SVG 滤镜（发光效果）
事件处理（点击、悬停、拖拽）

交互功能实现

节点拖拽：d3.drag() + React 状态更新
画布缩放：d3.zoom() + 变换矩阵
链接创建：鼠标事件 + 坐标计算
节点定位：静态定位（fx/fy）+ 随机分布算法

样式与动画

Tailwind CSS（通过 className）
CSS 过渡动画（transition-all duration-300）
SVG 滤镜（feGaussianBlur 发光效果）

数据流

Material[] (React Props) ↓useMemo 转换为 KnowledgeMapNode[] ↓D3.js 数据绑定 (data join) ↓SVG 元素渲染 ↓用户交互事件 ↓React 状态更新 ↓重新渲染
关键特性
静态节点模式：节点位置固定（fx/fy），不使用力导向动画
手动链接：支持拖拽创建节点间链接
双击添加节点：空白处双击创建新节点
可视化节点：特殊样式（金色）和图标（✨）

总结：

采用 D3.js + React + TypeScript + SVG 的组合，D3 负责图形渲染与交互，React 负责组件化与状态管理。