@web/mindmap
类 Xmind 体验的思维导图引擎,专注于展示逻辑分支。
特性
- 原生 ESM 驱动,无需构建即可在浏览器中使用。
- 支持自动布局算法。
- 高性能 SVG/DOM 渲染(1000+ 节点渲染耗时 < 50ms)。
- 支持节点的展开与折叠。
- 支持画布平移与缩放。
安装与使用
本模块不发布至 npmjs。请通过 loader.js 或 importmap 引入。
使用示例
import { Mindmap } from '@web/mindmap';
const mm = new Mindmap({
container: document.getElementById('app'),
data: {
text: '根节点',
children: [
{ text: '子节点 1' },
{ text: '子节点 2' }
]
}
});
API
new Mindmap(options)
options.container: HTMLElement, 容器元素。options.data: Object, 树形数据结构。options.nodeWidth: Number, 节点宽度 (默认 120)。options.nodeHeight: Number, 节点高度 (默认 40)。options.hGap: Number, 水平间距 (默认 60)。options.vGap: Number, 垂直间距 (默认 20)。
mm.addNode(parentId, text)
- 向指定 ID 或文本匹配的节点添加子节点。
mm.removeNode(nodeId)
- 删除指定 ID 或文本匹配的节点。
Description
Languages
JavaScript
90.8%
HTML
9.2%