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

秦凡湛Sheila

于 2025-06-11 09:19:20 发布

阅读量225

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00945/article/details/148578905

版权

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

vis-network :dizzy: Display dynamic, automatically organised, customizable network views. 项目地址: https://gitcode.com/gh_mirrors/vi/vis-network

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
}