vis.js 网络拓扑结构

2022-07-12 15:32:38 阅读：172 来源： 互联网

标签：node code label BJ js vis nodes 网络拓扑 id

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>  <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>

标签：node,code,label,BJ,js,vis,nodes,网络拓扑,id
来源： https://www.cnblogs.com/snowhite/p/16470217.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vis.js 网络拓扑结构