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>
