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

柏旦谊Free

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

阅读量235

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01133/article/details/148578919

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

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

什么是 Vis Network 独立构建版本

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

独立构建版本的特点

完整打包：包含 Vis Network 核心功能及其所有依赖项
开箱即用：无需额外配置依赖关系和样式
隔离性：不能与其他 Vis 系列包混用，因为每个包都有自己的依赖项副本
多种格式：提供 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);