Vis Network 独立构建版本使用指南

什么是 Vis Network 独立构建版本

Vis Network 提供了独立构建版本（Standalone Build），这是一个将所有依赖项打包在一起的完整版本，特别适合只需要网络图功能而不需要其他可视化组件（如时间轴、3D图表等）的场景。

独立构建版本的特点

1. 完整打包：包含 Vis Network 核心功能及其所有依赖项
2. 开箱即用：无需额外配置依赖关系和样式
3. 隔离性：不能与其他 Vis 系列包混用，因为每个包都有自己的依赖项副本
4. 多种格式：提供 UMD 和 ESM 两种模块格式，每种都有压缩和未压缩版本

适用场景

• 只需要网络图可视化功能
• 希望简化项目配置，避免处理依赖关系
• 快速原型开发或演示场景
• 在线代码编辑器（如 JSFiddle）中使用

包含内容

独立构建版本包含以下核心组件：

Vis Network 核心

• Network：网络图主类
• NetworkDOTParser：DOT格式解析器
• NetworkImages：图像处理工具
• NetworkOptions：配置选项
• networkGephiParser：Gephi格式解析器
• parseDOTNetwork：DOT解析函数
• parseGephiNetwork：Gephi解析函数

Vis Data

• DataSet：数据集管理
• DataView：数据视图
• Queue：队列工具

其他

• Vis Util：实用工具
• CSS 样式表

使用方法

浏览器直接使用（UMD格式）

<script type="text/javascript" src="path/to/vis-network.min.js"></script>
<script type="text/javascript">
  // 创建节点数据集
  var nodes = new vis.DataSet([
    { id: 1, label: "节点1" },
    { id: 2, label: "节点2" },
    { id: 3, label: "节点3" },
    { id: 4, label: "节点4" },
    { id: 5, label: "节点5" }
  ]);

  // 创建边数据集
  var edges = new vis.DataSet([
    { from: 1, to: 3 },
    { from: 1, to: 2 },
    { from: 2, to: 4 },
    { from: 2, to: 5 },
    { from: 3, to: 3 }
  ]);

  // 创建网络图实例
  var container = document.getElementById("network-container");
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {}; // 可选配置
  var network = new vis.Network(container, data, options);
</script>

模块化项目中使用（ESM格式）

import { DataSet, Network } from "vis-network/standalone";

// 创建节点数据集
const nodes = new DataSet([
  { id: 1, label: "节点1" },
  { id: 2, label: "节点2" },
  { id: 3, label: "节点3" },
  { id: 4, label: "节点4" },
  { id: 5, label: "节点5" }
]);

// 创建边数据集
const edges = new DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);

// 创建网络图实例
const container = document.getElementById("network-container");
const data = {
  nodes: nodes,
  edges: edges
};
const options = {}; // 可选配置
const network = new Network(container, data, options);

注意事项

1. 不兼容性：独立构建版本不能与其他 Vis 系列包（如 Timeline、Graph3D）一起使用
2. 样式自动注入：使用 ESM 导入时，CSS 样式会自动注入到页面中
3. 性能考虑：独立构建版本体积较大，如果只需要基本功能，考虑使用 peer 构建版本

进阶建议

• 通过 options 参数可以自定义网络图的布局、交互行为等
• 节点和边的数据结构支持多种属性配置，如颜色、形状、大小等
• 网络图实例提供了丰富的事件系统，可以监听用户交互

独立构建版本是快速集成 Vis Network 到项目中的便捷选择，特别适合初学者或需要快速实现网络可视化的场景。对于更复杂的应用，可以考虑使用 peer 构建版本以获得更好的灵活性和性能优化。