visjs使用小记-1.创建一个简单的网络拓扑图
来源:互联网 发布:淘宝买零食靠谱吗 编辑:程序博客网 时间:2024/05/22 04:39
1.插件官网:http://visjs.org/
2.创建一个简单的网络拓扑图
<!doctype html><html><head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style></head><body><p> 创建一个简单的网络拓扑图.</p><div id="mynetwork"></div><!-- 用户存放拓扑图的容器--><script type="text/javascript">//定义需要生成的节点var allnodes = [ {id: 1, label: 'Node 1', title: 'I have a popup 1!'}, {id: 2, label: 'Node 2', title: 'I have a popup 2!'}, {id: 3, label: 'Node 3', title: 'I have a popup 3!'}, {id: 4, label: 'Node 4', title: 'I have a popup 4!'}, {id: 5, label: 'Node 5', title: 'I have a popup 5!'}, {id: 6, label: 'Node 6', title: 'I have a popup 6!'}, {id: 7, label: 'Node 7', title: 'I have a popup 7!'}, {id: 8, label: 'Node 8', title: 'I have a popup 8!'}, {id: 9, label: 'Node 9', title: 'I have a popup 9!'}, {id: 10, label: 'Node 10', title: 'I have a popup 10!'} ];//定义节点连接线var alledges = [ {id: 'a',from: 1, to: 2,title: 'test12!'}, {id: 'b',from: 1, to: 3,title: 'test13!'}, {id: 'c',from: 1, to: 4,title: 'test14!'}, {id: 'd',from: 3, to: 4,title: 'test34!'}, {id: 'e',from: 2, to: 5,title: 'test25!'}, {id: 'f',from: 2, to: 6,title: 'test26!'}, {id: 'g',from: 2, to: 7,title: 'test27!'}, {id: 'h',from: 3, to: 7,title: 'test37!'}, {id: 'i',from: 4, to: 8,title: 'test48!'}, {id: 'j',from: 8, to: 9,title: 'test89!'}, {id: 'k',from: 8, to: 10,title: 'test8to10!'} ]; // 创建节点对象 var nodes = new vis.DataSet(allnodes); // 创建连线对象 var edges = new vis.DataSet(alledges); // 创建一个网络拓扑图 var container = document.getElementById('mynetwork'); var data = {nodes: nodes,edges: edges}; var options = {interaction:{hover:true}}; var network = new vis.Network(container, data, options);</script></body></html>
阅读全文
1 0
- visjs使用小记-1.创建一个简单的网络拓扑图
- visjs使用小记-3.简单网络拓扑图的折叠与展开
- visjs使用小记-2.option参数注释说明
- VisJS 随机图
- visjs
- 最简单的flex网络拓扑图开发(一)
- Dom4j的简单使用小记
- 创建网络拓扑
- 使用PopupWindow创建一个简单的菜单
- d3.js-简单网络拓扑图实现
- 一个简单拓扑排序的 java 实现
- 使用 ASCII 画 流程图 网络拓扑图
- 使用jTopo画网络拓扑图
- ubuntu下apache的简单使用小记
- 使用VS 2010 Beta1创建一个独立的网络仿真器
- 最简单的flex网络拓扑图开发(二)从xml生成topo图
- 最简单的flex网络拓扑图开发(三)加入信息提示框
- 使用原生的函数构建一个简单的网络请求
- 宏基因组公众号7月精选文章目录
- kail linux 下无线攻击
- 解决robotframework-ride脚本运行中报monitorcolors not recognized错误
- [POJ 3041][USACO 2005] Asteroids Hungary算法求最小点覆盖
- Spring AOP中pointcut expression表达式解析
- visjs使用小记-1.创建一个简单的网络拓扑图
- 上传视频文件需要注意的点(Linux+tomcat+nginx+Struts2 )
- 在建筑业中砖混结构和框架结构有有何区别
- 高斯曲线拟合原理及实现
- getuid() , geteuid()
- LeetCode(33)--Search in Rotated Sorted Array
- Fix a Tree CodeForces
- Python数据分析与展示(4)——Matplotlib基础绘图函数示例
- Java TreeMap教程书目录