visjs使用小记-1.创建一个简单的网络拓扑图

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>

文章转自：https://blog.csdn.net/onlyjin/article/details/76673686

转载于:https://www.cnblogs.com/crystaltu/p/9177595.html

visjs使用小记-1.创建一个简单的网络拓扑图相关推荐

安装GNS3以及实现一个简单的网络拓扑图
双击(GNS3.exe)安装包按顺序安装就可以到下面的一个界面: 安装完成后路由器选项卡是灰色的(不可用),可以通过挂载的方式添加对应的路由器,因此必须挂载相应镜像,下面是相应的步骤: 找到文件中相应 ...
创建一个简单的存储过程(RroGetA_Z)，要求输出A到Z之间的26个大写字母
<SQL Server数据库设计与项目实践> ISBN:978-7-302-40610-5 p121 动手实践-实训内容-(1) (1)创建一个简单的存储过程(RroGetA_Z),要求输 ...
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏即使是现在,很多初学游戏开发的同学,在谈到Unity的时候,依然会认为Unity只能用于制作3D游戏的.实际上,Unity在2013年发布 ...
Linux Namespace系列（09）：利用Namespace创建一个简单可用的容器
本文将演示如何利用namespace创建一个完整的容器,并在里面运行busybox.如果对namespace不是很熟悉,请先参考前面几遍介绍不同类型namespace的文章. busybox是一个Li ...
Windows下编译TensorFlow1.3 C++ library及创建一个简单的TensorFlow C++程序
参考:https://www.cnblogs.com/jliangqiu2016/p/7642471.html Windows下编译TensorFlow1.3 C++ library及创建一个简单的T ...
WF4.0入门系列1——创建一个简单的工作流
WF4.0入门系列1--创建一个简单的工作流打开VS2010,选择文件-新建-项目,选择Workflow项工作流台应用程序,在名称处输入chapter01,选择合适的位置,这里默认,单击确定. V ...
idea建立一个java工程_IntelliJ IDEA（三、各种工程的创建 -- 之一 -- 创建一个简单的Java工程）...
一.创建一个简单的Java工程:HelloWorld 1. Eclipse的第一步是选择工作空间,然后创建项目: IDEA不同(没有工作空间的概念),第一步就直接创建具体的项目,项目创建过程中会选择在 ...
使用timer控件创建一个简单的报警程序
简介: 当我使用计算机工作时,我总是如此的专心致志,以至于每当我过了"一会儿"去看时间时,发现已经过了三个小时,而我却完全没有意识到!所以我决定使用我从Code Project学来 ...
jax-rs jax-ws_创建一个简单的JAX-RS MessageBodyWriter
jax-rs jax-ws JAX-RS确实很棒,借助JAXB,只需添加带有JAXB批注的批注数据对象,即可为您转换许多响应数据类型. 我对JAXB相当陌生,但是一些简单的注释的剪切/粘贴操作将带给您 ...

visjs使用小记-1.创建一个简单的网络拓扑图

visjs使用小记-1.创建一个简单的网络拓扑图相关推荐

最新文章

热门文章