使用visjs制作网络拓扑图


//关系图谱var container = document.getElementById('mapbox');var baseUrl = '${ctxPath}/assets/common/images/';var nodes_data;  //初始化后network中节点数据var edges_data;  //初始化后network中连线数据var network = null;var oNodes =  [{id: 1, label: '主机', image: baseUrl+'sever.png', shape: 'image'},{id: 2, label: '终端',  image: baseUrl+'computer.png', shape: 'image'},{id: 3, label: '防火墙', image: baseUrl+'network.png', shape: 'image'},{id: 8, label: '终端', image: baseUrl+'computer.png', shape: 'image'},{id: 9, label: '终端', image: baseUrl+'computer.png', shape: 'image'},{id: 4, label: '交换机',  image: baseUrl+'safe.png', shape: 'image'},{id: 6, label: '交换机',  image: baseUrl+'safe.png', shape: 'image'},{id: 7, label: '终端',  image: baseUrl+'computer.png', shape: 'image'},{id: 10, label: '终端',  image: baseUrl+'computer.png', shape: 'image'}];var oLines =  [{id: '1_2', from: 3, to: 6},{id: '1_10', from: 3, to: 4},{id: '1_3', from: 9, to: 4},{id: '1_4', from: 6, to: 2},{id: '2_5', from: 6, to: 7},{id: '3_7', from: 4, to: 10},{id: '3_8', from: 4, to: 8},{id: '3_9', from: 6, to: 1},];showNetwork();function showNetwork(){var nodes = new vis.DataSet(oNodes);var edges = new vis.DataSet(oLines);var datas = {nodes:nodes,edges:edges};var options={edges:{//arrows:'to',font:{size:12,strokeWidth:0, //文字边缘阴影color:'#ccc'},scaling:{label:true,},chosen:{edge:function(values,id,selected,hovering){values.shadow = true;  //选中时，开启连线阴影}},shadow:{enabled:false,color:'#fff',size:20,x:0,y:0},},interaction:{hover:true,  //鼠标悬停效果开启tooltipDelay:10,  //title延时dragView:false,selectConnectedEdges:false  //选中节点时，线不高亮},autoResize:true,nodes:{chosen:{  //被选中node:function(values, id, selected, hovering){  //选中节点的ID// console.log('values:'+values+' id:'+id+' selected:'+selected+' hovering:'+hovering);values.shadow = true;  //选中时节点阴影开启}},font:{color:'#ccc',  //标签文字的颜色size:12},shadow:{enabled:false,color:'#fff',size:28,x:0,y:0},//shape:'circularImage',  //图形中可填充背景色，与image的区别size:16   //label不在图形中的图形大小}};network = new vis.Network(container,datas,options);nodes_data = network.body.data.nodes;edges_data = network.body.data.edges;//点击图谱network.on('click',function(params){if(params.nodes.length==0&&params.edges.length>0){  //点击线条// 将列表的序号清空oFrom = edges_data._data[params.edges]['from'];oTo = edges_data._data[params.edges]['to'];oFromField = edges_data._data[params.edges]['fromField'];oToField = edges_data._data[params.edges]['toField'];};if(params.nodes.length>0){  //点击节点var nodeField = nodes_data._data[params.nodes]['nodeField'];var nodeValue = nodes_data._data[params.nodes]['id'];};});};

使用visjs制作网络拓扑图相关推荐

vue项目用antv/g6做网络拓扑图
前言: 本人公司要求我制作网络拓扑图编辑工具,现在阶段功能研究制作完成,我发布的内容仅供互相学习参考,一切产生的后果与我无关.本人用的是vue 先上视频 <template><div ...
visjs使用小记-1.创建一个简单的网络拓扑图
1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head><title> ...
visio网络拓扑图_人船模型怎么画？分享高颜值模型图软件
人船模型是指一个原本处于静态的系统,通过互相作用后,在一个方向上达到动量守恒. "人船模型"是由人和船两个物体构成的系统,一个人从船头走到船尾,船停在静止的水面上,设人的质量为m, ...
基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
网络拓扑图画图工具_写了100多篇原创文章，我常用的在线工具网站推荐给大家！...
不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编辑完成 ...
基于QT-QGraphicsView的网络拓扑图
最近研究制作基于QT的网络拓扑图,目前比较理想的网络拓扑图: 0)到目前为止,自定义制作和实现的传输拓扑图效果基于QWidget.QGraphicsView.QGraphicsPixmapItem. ...
办公实用技巧：利用迅捷画图绘制网络拓扑图操作方法介绍
网络拓扑图,程序设计图,组织结构图等是几种比较常见的流程图主题,使用的人呢比较对并且绘制起来很方便很实用,所以很受大家青睐,所以今天爱跟风的小编就来和大家分享一下网络拓扑图的绘制方法. 绘制工具:迅捷 ...
利用迅捷画图绘制环型网络拓扑图操作方法介绍
网络拓扑图是是用传输媒体互联的物理布局,网络拓扑图有几种主要的结构星型结构,环型结构,总线结构,网状结构以及环型结构,今天要分享的是利用迅捷画图绘制网络拓扑图的操作方法介绍. 工具/原料: 浏览器,电 ...
EDraw 亿图图示设计软件一款好用的绘制网络拓扑图的软件
亿图网络图绘制作软件是由亿图软件公司推出的一款专门用来绘制电脑网络图的软件.软件功能强大,容易上手,几乎包含所有网络图的绘制,例如基本网络图,网络拓扑图,Cisco网络图,机架图,网络通信图,3D网络 ...

使用visjs制作网络拓扑图

使用visjs制作网络拓扑图相关推荐

最新文章

热门文章