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 网络拓扑结构的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
