如何使用vis.js动态可视化库 vis.js的使用

network实例请参考官网：http://visjs.org/network_examples.html

vis.js是什么？
vis.js 基于浏览器的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。该库由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。这里主要用到Network（网状图）

network是一种可视化的网络和网络组成的nodes节点和edges边缘。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化工作在任何现代浏览器上都能达到几千个节点和边缘。为了处理更大数量的节点，网络具有集群支持。网络使用HTML画布进行渲染。

代码如下：

 //最重要的两个源文件的引入vis-network.js和vis-network.min.css注意路径不要错   这两个文件在文章最下面 自行打开创建文件夹复制内容

//先在body中定义一个div
<div id="mynetwork"></div>  //创建画布网状图区域

//设置样式
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>

//在js中
<script type="text/javascript">

 //先创建节点个数
var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);
    
 //再创建关系线,节点与哪个节点相连接
    var edges = new vis.DataSet([
         {from:1,to:2},
        {from:2,to:3},
        {from:3,to:4},
        {from:4,to:5},
        {from:5,to:1},
        {from:1,to:4},
        {from:2,to:5},
        {from:5,to:3},
    ]);
    
// 创建一个网状图
    var container = document.getElementById('mynetwork');
    
//以vis格式使用数据
    var data = {
        nodes: nodes,
        edges: edges
};

//数据设置（可对创建的节点，关系线进行设置），此处暂无设置
    var options = {};
    
// 初始化网状图（把网状图实例化）
    var network = new vis.Network(container, data, options);
</script>

效果如下：

vis.js

vis-network.min.js
https://unpkg.com/vis-network@9.1.0/dist/vis-network.min.js

vis-network.min.css
https://unpkg.com/vis-network@9.1.0/dist/dist/vis-network.min.css