vis.js 网络拓扑结构

2022/7/12 23:31:35

本文主要是介绍vis.js 网络拓扑结构,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

https://visjs.org/#download_install

 

 

更详细的教程从上面网址上面获取

近日因工作需要研究了这个js. 做了个简单的demo,记录一下

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport"           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>     <!--<script type="text/javascript" src="js/vis-network.min.js"></script>-->     <style type="text/css">         body {             background-color: #080f37;         }         #mynetwork {             width: 100%;             height: 800px;             border: 1px solid #205ab0;             color: #fff;         }     </style> </head> <body> <div id="mynetwork"></div>   <script type="text/javascript">     // 创建节点数据数组     var nodes = [     {             "code": "id_4",             "id": "node_4",             "label": "北京字节跳动网络技术有限公司"         },         {             "code": "id_2",             "id": "node_2_7",             "label": "BJ-IDC-ZW-NE5000-1"         },         {             "code": "id_2",             "id": "node_2_6",             "label": "BJ-IDC-YZYH-NE5000-2"         },         {             "code": "id_2",             "id": "node_2_5",             "label": "BJ-IDC-YZYH-NE5000-1"         },         {             "code": "id_3",             "id": "node_3_1",             "label": "BJ-IDC-HLDW-7950-1",             "status": "0"         },         {             "code": "id_2",             "id": "node_2_3",             "label": "BJ-IDC-YF-NE5000-1"         },         {             "code": "id_3",             "id": "node_3_5",             "label": "BJ-IDC-RZ-12812-3",             "status": "0"         },         {             "code": "id_3",             "id": "node_3_9",             "label": "BJ-IDC-ZW-12816-2",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_3",             "label": "BJ-IDC-HLDW-9908-1",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_11",             "label": "RZ-NE5000-2",             "status": "1"         },         {             "code": "id_2",             "id": "node_2_1",             "label": "BJ-IDC-DS-NE5000-1"         },         {             "code": "id_3",             "id": "node_3_10",             "label": "RZ-NE5000-1",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_7",             "label": "BJ-IDC-YZYH-12812-1",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_6",             "label": "BJ-IDC-RZ-12812-4",             "status": "1"         },         {             "code": "id_2",             "id": "node_2_8",             "label": "BJ-IDC-ZW-NE5000-2"         },         {             "code": "id_3",             "id": "node_3_2",             "label": "BJ-IDC-HLDW-7950-2",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_4",             "label": "BJ-IDC-HLDW-9908-2",             "status": "1"         },         {             "code": "id_3",             "id": "node_3_8",             "label": "BJ-IDC-ZW-12816-1",             "status": "1"         },         {             "code": "id_2",             "id": "node_2_4",             "label": "BJ-IDC-YF-NE5000-2"         },         {             "code": "id_2",             "id": "node_2_2",             "label": "BJ-IDC-DS-NE5000-2"         },         {             "code": "id_1",             "id": "node_1",             "label": "骨干网"         }     ]     // 创建边数据数组     var edges = [     {             "from": "node_4",             "to": "node_3_1"         },         {             "from": "node_4",             "to": "node_3_10"         },         {             "from": "node_4",             "to": "node_3_11"         },         {             "from": "node_4",             "to": "node_3_2"         },         {             "from": "node_4",             "to": "node_3_3"         },         {             "from": "node_4",             "to": "node_3_4"         },         {             "from": "node_4",             "to": "node_3_5"         },         {             "from": "node_4",             "to": "node_3_6"         },         {             "from": "node_4",             "to": "node_3_7"         },         {             "from": "node_4",             "to": "node_3_8"         },         {             "from": "node_4",             "to": "node_3_9"         },         {             "from": "node_3_9",             "to": "node_2_7"         },         {             "from": "node_3_9",             "to": "node_2_8"         },         {             "from": "node_3_8",             "to": "node_2_7"         },         {             "from": "node_3_8",             "to": "node_2_8"         },         {             "from": "node_3_8",             "to": "node_3_9"         },         {             "from": "node_3_7",             "to": "node_2_5"         },         {             "from": "node_3_7",             "to": "node_2_6"         },         {             "from": "node_3_7",             "to": "node_3_24"         },         {             "from": "node_3_6",             "to": "node_2_1"         },         {             "from": "node_3_6",             "to": "node_2_2"         },         {             "from": "node_3_6",             "to": "node_2_5"         },         {             "from": "node_3_6",             "to": "node_2_6"         },         {             "from": "node_3_5",             "to": "node_2_1"         },         {             "from": "node_3_5",             "to": "node_2_2"         },         {             "from": "node_3_5",             "to": "node_2_5"         },         {             "from": "node_3_5",             "to": "node_2_6"         },         {             "from": "node_3_5",             "to": "node_3_6"         },         {             "from": "node_3_3",             "to": "node_3_4"         },         {             "from": "node_3_2",             "to": "node_2_1"         },         {             "from": "node_3_2",             "to": "node_2_2"         },         {             "from": "node_3_2",             "to": "node_2_3"         },         {             "from": "node_3_2",             "to": "node_2_4"         },         {             "from": "node_3_2",             "to": "node_3_3"         },         {             "from": "node_3_2",             "to": "node_3_4"         },         {             "from": "node_3_11",             "to": "node_2_1"         },         {             "from": "node_3_11",             "to": "node_2_6"         },         {             "from": "node_3_10",             "to": "node_2_2"         },         {             "from": "node_3_10",             "to": "node_2_5"         },         {             "from": "node_3_10",             "to": "node_3_11"         },         {             "from": "node_3_1",             "to": "node_2_1"         },         {             "from": "node_3_1",             "to": "node_2_2"         },         {             "from": "node_3_1",             "to": "node_2_3"         },         {             "from": "node_3_1",             "to": "node_2_4"         },         {             "from": "node_3_1",             "to": "node_3_2"         },         {             "from": "node_3_1",             "to": "node_3_3"         },         {             "from": "node_3_1",             "to": "node_3_4"         },         {             "from": "node_2_8",             "to": "node_1"         },         {             "from": "node_2_8",             "to": "node_2_1"         },         {             "from": "node_2_8",             "to": "node_2_2"         },         {             "from": "node_2_8",             "to": "node_2_3"         },         {             "from": "node_2_8",             "to": "node_2_4"         },         {             "from": "node_2_8",             "to": "node_2_5"         },         {             "from": "node_2_8",             "to": "node_2_6"         },         {             "from": "node_2_7",             "to": "node_1"         },         {             "from": "node_2_7",             "to": "node_2_1"         },         {             "from": "node_2_7",             "to": "node_2_2"         },         {             "from": "node_2_7",             "to": "node_2_3"         },         {             "from": "node_2_7",             "to": "node_2_4"         },         {             "from": "node_2_7",             "to": "node_2_5"         },         {             "from": "node_2_7",             "to": "node_2_6"         },         {             "from": "node_2_7",             "to": "node_2_8"         },         {             "from": "node_2_6",             "to": "node_1"         },         {             "from": "node_2_6",             "to": "node_2_1"         },         {             "from": "node_2_6",             "to": "node_2_3"         },         {             "from": "node_2_6",             "to": "node_2_4"         },         {             "from": "node_2_5",             "to": "node_1"         },         {             "from": "node_2_5",             "to": "node_2_2"         },         {             "from": "node_2_5",             "to": "node_2_3"         },         {             "from": "node_2_5",             "to": "node_2_4"         },         {             "from": "node_2_5",             "to": "node_2_6"         },         {             "from": "node_2_4",             "to": "node_1"         },         {             "from": "node_2_3",             "to": "node_1"         },         {             "from": "node_2_3",             "to": "node_2_4"         },         {             "from": "node_2_2",             "to": "node_1"         },         {             "from": "node_2_2",             "to": "node_2_3"         },         {             "from": "node_2_2",             "to": "node_2_4"         },         {             "from": "node_2_2",             "to": "node_2_6"         },         {             "from": "node_2_1",             "to": "node_1"         },         {             "from": "node_2_1",             "to": "node_2_2"         },         {             "from": "node_2_1",             "to": "node_2_3"         },         {             "from": "node_2_1",             "to": "node_2_4"         },         {             "from": "node_2_1",             "to": "node_2_5"         }     ]     /**      * 自定义图片      */     for (var i = 0;i < nodes.length;i++){         if (nodes[i].code == 'id_1'){             nodes[i].image = 'images/level4.png';         }         if (nodes[i].code == 'id_2'){             nodes[i].image = 'images/level3.png';         }         if (nodes[i].code == 'id_3' && nodes[i].status == '0'){             nodes[i].image = 'images/level2-red.png';         }         if (nodes[i].code == 'id_3' && nodes[i].status == '1'){             nodes[i].image = 'images/level2.png';         }         if (nodes[i].code == 'id_4'){             nodes[i].image = 'images/level1.png';         }     }     for (var i = 0;i < nodes.length;i++){         if (edges[i].from == 'node_4') {             edges[i].length = 300;         }     }     // 获取容器     var container = document.getElementById('mynetwork');       // 将数据赋值给vis 数据格式化器     var data = {         nodes: nodes,         edges: edges     };     console.log('nodes',data.nodes)       var options = {         // autoResize: false,         nodes:{             shape: 'image',             font: {                 align: 'left',                 color: '#fff',                 size: 12                 // vadjust: 10, // 标签文本的垂直位置,值越大离节点越远             },             // fixed: true, //节点不可以移动         },         layout: {           randomSeed: 1, //配置每次生成的节点位置都一样,参数为数字1、2等         //   hierarchical: {         //     direction: "UD", //UD:上下 DU:下上 LR:左右 RL:右左         //     sortMethod: "directed",         //    }, //层级结构显示         },         // physics: {         //   enabled: true,         //         hierarchicalRepulsion: {         //     nodeDistance: 300,         //     },         // }           physics: {             forceAtlas2Based: {               gravitationalConstant: -26,               centralGravity: 0.005,               springLength: 100,               springConstant: 0.18,             },             maxVelocity: 146,             solver: "forceAtlas2Based",             timestep: 0.35,             stabilization: { iterations: 150 },         },     };       // 初始化关系图     var network = new vis.Network(container, data, options); </script> </body>  

 

 



这篇关于vis.js 网络拓扑结构的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程