vis.js绘制网络拓扑图，并且鼠标移上去会有显示效果
作者：互联网
<!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8" />
<title>
Vis Network | Edge Styles | Static smooth curves - World Cup Network
</title>
<script type="text/javascript" src="js/vis-network.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 100%;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height: 280px;
}
* {
padding: 0;
margin: 0;
}
.menu {
/*这个样式不写，右键弹框会一直显示在画布的左下角*/
position: absolute;
background: rgba(3, 3, 3, 0.6);
border-radius: 5px;
left: -99999px;
top: -999999px;
}
.menu ul {
list-style: none
}
.menu ul li {
padding: 5px 10px;
color: #ffff;
border-bottom: 1px solid #ffffff;
font-size: 14px;
cursor: pointer;
list-style: none;
}
.menu ul li:hover {
color: #659bc5;
}
.menu ul li:last-child {
border-bottom: none;
padding: 5px 10px 0 10px;
}
</style>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div id="optionsContainer"></div>
<div id="mynetwork"></div>
<!--菜单操作-->
<div id="menuOperation" class="menu" style="display:none;">
<ul>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 下线</li>
<li><span class="glyphicon glyphicon-road" aria-hidden="true"></span> 通行</li>
</ul>
</div>
<!--节点悬停-->
<div class="menu" id="divHoverNode" style="display: none;">
<!--<ul></ul>-->
</div>
<script type="text/javascript">
function redrawAll() {
var network;
var container = document.getElementById("mynetwork");
var options = {
nodes: {
shape: "dot",
scaling: {
min: 10,
max: 30,
},
font: {
size: 12,
face: "Tahoma",
},
},
edges: {
color: {
inherit: true
},
width: 0.15,
smooth: {
type: "continuous",
},
},
interaction: {
hover: true,
hoverConnectedEdges: true,
hideEdgesOnDrag: true,
tooltipDelay: 200,
},
configure: {
filter: function(option, path) {
if (option === "inherit") {
return true;
}
if (option === "type" && path.indexOf("smooth") !== -1) {
return true;
}
if (option === "roundness") {
return true;
}
if (option === "hideEdgesOnDrag") {
return true;
}
if (option === "hideNodesOnDrag") {
return true;
}
return false;
},
container: document.getElementById("optionsContainer"),
showButton: false,
},
physics: false,
};
var data = {
nodes: nodes,
edges: edges
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
console.log(network)
function getNode(option) {
for (var i = 0; i < nodes.length; i++) {
if (option == nodes[i].id) {
// console.log('i',nodes[i]);
return nodes[i];
}
}
}
function getEdge(option) {
var linkId = option;
var linkIdFirst = linkId.substring(0, 1); //截取第一位
var linkIdLast = linkId.substring(linkId.length - 1, linkId.length); //截取最后一位
var dataList = []; //存放线条两边的节点nodes数据
for (var j = 0; j < nodes.length; j++) {
if (linkIdFirst == nodes[j].id || linkIdLast == nodes[j].id) {
dataList.push(nodes[j]);
}
}
return dataList;
}
//todo 悬停在节点上--显示弹框
network.on('hoverNode', function(properties) {
// console.log('悬停节点',properties);
var hoveNodeList = getNode(properties.node);
// console.log('hoveNodeList',hoveNodeList);
var deviceType = hoveNodeList.type;
var imgPathSrc = hoveNodeList.image;
// if (deviceType == "Internet" || deviceType == "hub") {
// var $ul = "<ul>" +
// "<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> " + hoveNodeList.name + " </span> </li>" +
// "</ul>";
// $("#divHoverNode").append($ul);
// } else if (deviceType == "switch") {
// var $ul = "<ul>" +
// "<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> 设备类型： " + hoveNodeList.name + " </span> </li>" +
// "<li>IP：" + hoveNodeList.ip + "</li>" +
// "<li>MAC：" + hoveNodeList.mac + "</li>" +
// "<li>设备型号：" + hoveNodeList.model + "</li>" +
// "</ul>";
// $("#divHoverNode").append($ul);
// } else {
var $ul = "<ul>" +
"<li><img src=' " + imgPathSrc + " ' width='30px' height='25px'><span> 设备类型：" + hoveNodeList.name + " </span> </li>" +
"<li>IP：" + hoveNodeList.ip + "</li>" +
"<li>MAC：" + hoveNodeList.mac + "</li>" +
"<li>账号：" + hoveNodeList.model + "</li>" +
"<li>所在位置：" + hoveNodeList.location + "</li>" +
"<li>最后登录时间：" + hoveNodeList.uptime + "</li>" +
"</ul>";
$("#divHoverNode").append($ul);
// }
$('#divHoverNode').css({
'display': 'block',
'left': properties.event.offsetX + 15,
'top': properties.event.offsetY + 140
});
console.log(properties.event.offsetX, properties.event.offsetY)
// $('#menuOperation').hide();
});
//todo 从节点移开---隐藏弹框
network.on('blurNode', function() {
$("#divHoverNode").hide();
$("#divHoverNode").empty(); //移除之后清空div
});
//todo 悬停在边上--显示弹框
network.on('hoverEdge', function(properties) {
// console.log('悬停边',properties);
var hoveEdgeList = getEdge(properties.edge);
console.log(hoveEdgeList)
// console.log('hoveEdgeList',hoveEdgeList);
var $ul = "<ul>" +
"<li>名称：" + hoveEdgeList[0].name + "->" + hoveEdgeList[1].name + "</li>" +
"<li>端口号：" + hoveEdgeList[0].ip + "->" + hoveEdgeList[1].ip + "</li>" +
"</ul>";
$("#divHoverNode").append($ul);
$('#divHoverNode').css({
'display': 'block',
'left': properties.event.offsetX - 50,
'top': properties.event.offsetY + 325
});
// $('#menuOperation').hide();
});
//todo 从边上移开---隐藏弹框
network.on('blurEdge', function(properties) {
// $("#divHoverNode").hide();
$("#divHoverNode").empty(); //移除之后清空div
});
//todo 点击的判断是否选中节点时候显示隐藏
// network.on('click', function(properties) {
// var clickNodeList = getNode(properties.nodes[0]);
// if (typeof(clickNodeList) == "undefined") {
// } else {
// $('#menuOperation').css({
// 'display': 'block',
// 'left': properties.event.center.x + 0,
// 'top': properties.event.center.y + 0
// });
// }
// });
}
redrawAll();
</script>
</body>
</html>
var nodes = [{
id: 1,
label: "监控系统主机",
title: "Country: " + "Algeria" + "<br>" + "Team: " + "Club Africain",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -250,
y: 10,
},
{
id: 2,
label: "交换机",
title: "Country: " + "Colombia" + "<br>" + "Team: " + "Toulouse",
value: 40,
group: 11,
image: "https://csdnimg.cn/medal/chizhiyiheng@240.png",
shape: "image",
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -450,
y: 10,
},
{
id: 3,
label: "Abel Hernández",
title: "Country: " + "Uruguay" + "<br>" + "Team: " + "Palermo",
value: 40,
group: 6,
image: "https://csdnimg.cn/medal/chizhiyiheng@240.png",
shape: "image",
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -50,
y: 100,
},
{
id: 4,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -600,
y: -140,
},
{
id: 5,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -600,
y: 10,
},
{
id: 6,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
x: -600,
y: 160,
},
{
id: 7,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: -230,
},
{
id: 8,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: -160,
},
{
id: 9,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: -90,
},
{
id: 10,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: 10,
},
{
id: 11,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: 100,
},
{
id: 12,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: 170,
},
{
id: 13,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -700,
y: 230,
},
{
id: 14,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -50,
y: -100,
},
{
id: 15,
label: "61.9.13.4",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -800,
y: 10,
},
{
id: 16,
label: "61.9.13.1",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -900,
y: 10,
},
{
id: 17,
label: "61.9.13.2",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -900,
y: -220,
},
{
id: 18,
label: "61.9.13.3",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -900,
y: 230,
}, {
id: 19,
label: "61.9.13.1",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -1000,
y: -300,
},
{
id: 20,
label: "61.9.13.2",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -1000,
y: -220,
},
{
id: 21,
label: "61.9.13.3",
title: "61.9.13.4",
value: 40, //图标大小
image: "https://csdnimg.cn/medal/qixiebiaobing1@240.png", //图标icon
shape: "image",
group: 6,
name: "交换机",
// type: "switch",
ip: "192.168.30.125",
mac: "48:de:3d:e2:49:a8",
model: "H3C",
location: '西安市',
uptime: "2020-09-03 10:50:50",
port: "22",
ignore: "true",
flag: "true",
x: -1000,
y: -140,
},
];
// create an array with edges
var edges = [
// label: "top", font: { align: "top" }决定关系线旁文字位置
{ from: 1, to: 3, label: "top", font: { align: "top", color: "red" }, arrows: "to", color: "red", id: "1>3" },
{ from: 2, to: 1, label: "horizontal", font: { align: "horizontal" }, arrows: "to", physics: true, id: "2>1" },
{ from: 1, to: 14, label: "bottom", font: { align: "bottom" }, id: "1>14" },
{ from: 4, to: 2, label: "middle", font: { align: "middle" }, id: "4>2" },
{ from: 5, to: 2, id: "5>2" },
{ from: 6, to: 2, id: "6>2" },
{ from: 7, to: 4, id: "7>4" },
{ from: 8, to: 4, id: "8>4" },
{ from: 9, to: 4, id: "9>4" },
{ from: 10, to: 5, id: "10>5" },
{ from: 15, to: 5, id: "15>5" },
{ from: 11, to: 6, id: "11>6" },
{ from: 12, to: 6, id: "12>6" },
{ from: 13, to: 6, id: "13>6" },
{ from: 16, to: 15, id: "16>15" },
{ from: 17, to: 15, id: "17>15" },
{ from: 18, to: 15, id: "18>15" },
{ from: 19, to: 17, id: "19>17" },
{ from: 20, to: 17, id: "20>17" },
{ from: 21, to: 17, id: "21>17" },
];
标签：移上去,image,50,网络拓扑,vis,61.9,true,id,图标 来源： https://blog.csdn.net/qq_43614518/article/details/117463999