vis.js网络图操作功能详解：从基础到高级应用

2026-02-04 04:04:54作者：邵娇湘

vis.js是一个强大的JavaScript可视化库，其中的Network模块专门用于创建交互式网络图。本文将深入探讨Network模块中的操作(manipulation)功能，帮助开发者掌握如何实现节点和边的动态编辑。

一、操作功能概述

vis.js Network模块的操作系统允许用户直接在画布上添加、编辑和删除节点与边，极大地增强了交互体验。这个功能集相当于一个内置的"编辑器"，可以：

动态添加新节点和边
编辑现有节点和边的属性
删除选中的元素
通过编程方式控制所有操作

二、基本配置选项

要启用操作功能，需要在Network配置中添加manipulation对象：

var options = {
  manipulation: {
    enabled: true,  // 启用操作功能
    initiallyActive: true  // 初始显示工具栏
  }
};

核心配置参数

参数名	类型	默认值	说明
enabled	Boolean	false	是否启用操作功能
initiallyActive	Boolean	true	初始是否显示工具栏
addNode	Boolean/Function	true	控制添加节点功能
addEdge	Boolean/Function	true	控制添加边功能
editNode	Function	undefined	节点编辑处理函数
editEdge	Boolean/Function	true	控制编辑边功能
deleteNode	Boolean/Function	true	控制删除节点功能
deleteEdge	Boolean/Function	true	控制删除边功能
controlNodeStyle	Object	预设样式	控制节点的样式配置

三、高级功能实现

1. 自定义添加节点

通过函数方式可以完全控制节点的添加过程：

addNode: function(nodeData, callback) {
  // 可以在此处添加自定义逻辑
  nodeData.label = prompt("请输入节点标签", "新节点");
  if (nodeData.label) {
    callback(nodeData);  // 确认添加
  } else {
    callback(null);  // 取消操作
  }
}

2. 边连接验证

在添加边时进行业务逻辑验证：

addEdge: function(edgeData, callback) {
  if (edgeData.from === edgeData.to) {
    if (!confirm("不允许自连接，确定继续吗？")) {
      return;  // 取消操作
    }
  }
  callback(edgeData);  // 确认添加
}

3. 删除确认机制

实现删除前的二次确认：

deleteNode: function(data, callback) {
  if (confirm(`确定删除${data.nodes.length}个节点和${data.edges.length}条边吗？`)) {
    callback(data);
  }
}

四、样式自定义

controlNodeStyle允许完全自定义控制节点的外观：

controlNodeStyle: {
  shape: 'star',
  size: 10,
  color: {
    background: '#4CAF50',
    border: '#2E7D32',
    highlight: {
      background: '#81C784',
      border: '#2E7D32'
    }
  },
  borderWidth: 3
}