vis-network 常用API速查表
本速查表聚焦开发中高频使用的配置项、实例方法与关键事件，按模块分类整理，标注核心参数与使用场景，方便快速查阅。
一、核心配置项（Options）
| 模块 | 配置项 | 作用说明 | 默认值 |
|---|
| 基础画布 | autoResize | 是否自动适配容器大小 | true |
| height/width | 画布尺寸（支持百分比如100%或像素如600px） | 100% |
| clickToUse | 是否需点击激活画布才响应交互 | false |
| 节点 | nodes.shape | 节点形状（ellipse/circle/box/image/icon） | ellipse |
| nodes.size | 节点大小 | 25 |
| nodes.color | 节点颜色（含border/background/highlight状态） | 蓝色系 |
| nodes.label | 节点文本（可在节点数据中单独定义） | undefined |
| nodes.physics | 是否参与物理模拟（固定节点设为false） | true |
| 边 | edges.arrows.to | 边的箭头（enabled: true启用，type: 'arrow'） | false |
| edges.smooth | 边的平滑度（enabled: true，type: 'dynamic'动态弯曲） | true |
| edges.width | 边的宽度 | 1 |
| edges.label | 边的文本（如权重、关系类型） | undefined |
| 布局 | layout.hierarchical | 是否启用层级布局（适合树形结构） | false |
| layout.hierarchical.direction | 层级方向（UD上下/LR左右） | UD |
| 物理模拟 | physics.enabled | 是否启用物理模拟 | true |
| physics.solver | 求解器（barnesHut大规模/repulsion小规模） | barnesHut |
| physics.stabilization.iterations | 稳定化最大迭代次数（避免节点持续运动） | 1000 |
| 交互 | interaction.dragNodes | 是否允许拖拽节点 | true |
| interaction.zoomView | 是否允许缩放画布 | true |
| interaction.multiselect | 是否允许框选多个节点 | false |
二、高频实例方法
| 方法分类 | 方法名 | 作用说明 | 示例代码 |
|---|
| 基础操作 | destroy() | 销毁实例，移除DOM引用与事件 | network.destroy(); |
| setOptions(options) | 动态更新配置（支持部分更新） | network.setOptions({ nodes: { size: 30 } }); |
| on(event, callback) | 绑定事件监听器 | network.on('click', (params) => {}); |
| 数据/视图 | setData({nodes, edges}) | 覆盖实例数据（节点/边为vis.DataSet或数组） | network.setData({ nodes: newNodes, edges: newEdges }); |
| fit(options) | 缩放画布以显示指定节点（默认显示全部） | network.fit({ nodes: [1,2], minZoomLevel: 0.5 }); |
| focus(nodeId, options) | 聚焦指定节点（支持缩放） | network.focus(1, { scale: 2.0 }); |
| 节点/边 | getPositions(nodeIds) | 获取节点坐标（支持单个/多个节点ID） | network.getPositions([1,2]); // 返回{1:{x:50,y:80}, 2:{x:120,y:90}} |
| moveNode(nodeId, x, y) | 手动移动节点到画布坐标（x/y为画布像素） | network.moveNode(1, 200, 200); |
| selectNodes(nodeIds, highlightEdges) | 选择节点（highlightEdges是否高亮关联边） | network.selectNodes([1,2], true); |
| 物理控制 | startSimulation() | 启动物理模拟（手动停止后需调用） | network.startSimulation(); |
| stopSimulation() | 停止物理模拟（触发stabilized事件） | network.stopSimulation(); |
三、关键事件
| 事件分类 | 事件名 | 触发场景 | 核心参数（params） |
|---|
| 用户交互 | click | 点击画布（节点/边/空白区域） | nodes：点击的节点ID数组；edges：点击的边ID数组；pointer：坐标 |
| select | 选择状态变化（节点/边被选中/取消） | nodes/edges：当前选中的ID数组 |
| dragEnd | 拖拽节点或画布结束时 | nodes：拖拽的节点ID；pointer：拖拽结束坐标 |
| zoom | 缩放画布时 | direction：+放大/-缩小；scale：当前缩放级别 |
| 物理模拟 | stabilized | 物理模拟稳定或手动停止时 | iterations：稳定化迭代次数 |
| stabilizationProgress | 稳定化过程中（每updateInterval次迭代触发） | iterations：已完成次数；total：总迭代次数 |
| 渲染视图 | afterDrawing | 节点/边绘制完成后（可绘制自定义内容） | 无额外参数，需通过network实例获取画布上下文 |
| resize | 画布大小变化时（如窗口缩放） | width/height：新尺寸；oldWidth/oldHeight：旧尺寸 |
