vis.js使用之Vis Network使用

`vis.js` 是一款强大的 JavaScript 库，专门用于创建交互式网络图（Network Visualization）。它提供了一种直观的方式来展示复杂的数据结构，如社交网络、流程图、拓扑结构等。`Vis.Network` 是 `vis.js` 的核心组件，用于构建动态的节点（Nodes）和边（Edges）。

使用 `Vis.Network` 的步骤通常包括以下几个部分：

1. **包含库**：首先需要在HTML文件中引入vis.js库，以及它的网络模块。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.28.0/vis.min.js"></script>

2. **初始化网络**：创建一个空的网络容器，并设置其配置，例如节点数据、边数据、布局算法等。

var network = new vis.Network(container, {
  nodes: [], // 节点数组
  edges: [], // 边数组
  layout: { // 配置布局算法
    type: 'force'
  }
});

3. **添加数据**：向网络添加节点和边，可以是静态的硬编码数据，也可以来自服务器的动态数据。

network.addnodes([...nodesData]);
network.addEdge([...edgesData]);

4. **事件处理**：`Vis.Network` 提供了许多内置的事件，你可以监听这些事件来响应用户的交互，比如点击节点或拖拽节点。

network.on('click', function(event) {
  console.log('Clicked on node:', event.data);
});

5. **更新网络**：如果你的数据有更新，可以调用 `network.update()` 来反映新的状态。