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

visjs使用小记-1.创建一个简单的网络拓扑图的更多相关文章

  1. 如何创建一个简单的Visual Studio Code扩展

    注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...

  2. 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型

    第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...

  3. 如何创建一个简单的C++同步锁框架(译)

    翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...

  4. Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目

    前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...

  5. ADF_General JSF系列1_创建一个简单的JSF Application

    2015-02-17 Creatd By BaoXinjian

  6. IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程

    一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...

  7. Symfony2之创建一个简单的web应用

    Symfony2——创建bundle       bundle就像插件或者一个功能齐全的应用,我们在应用层上开发的应用的所有代码,包括:PHP文件.配置文件.图片.css文件.js文件等都会包含在bu ...

  8. 如何创建一个简单的struts2程序

    如何创建一个简单的Struts2程序 “计应134(实验班) 凌豪” 1.创建一个新的Web项目test(File->new->Web Project) 2.Struts2框架的核心配置文 ...

  9. 使用 CodeIgniter 创建一个简单的 Web 站点

    原文:使用 CodeIgniter 创建一个简单的 Web 站点 参考源自: http://www.ibm.com/developerworks/cn/web/wa-codeigniter/index ...

随机推荐

  1. 搭建一个IntelliJ的Spark项目

    之前发现创建一个新项目之后,无法添加scala class 创建新项目 选择maven项目,然后选择simple或者quickstart: 进入项目后,在Project Structure里面,在gl ...

  2. CSS内容简单归纳

    具体内容请查阅<CSS参考手册> 一.CSS模块介绍 1.1 CSS1中定义了网页基本属性 字体.颜色.补白.基本选择器等 1.2 CSS2中在CSS1的基础上添加了高级功能 浮动和定位. ...

  3. Java语言与C语言混合编程(1)--Java native 关键字

    一. 什么是 native Method 简单地讲,一个 native Method 就是一个java调用非java代码的接口.一个 native Method 是这样一个java的方法:该方法的实现 ...

  4. [转载]Linux驱动mmap内存映射

    原文地址:https://www.cnblogs.com/wanghuaijun/p/7624564.html mmap在linux哪里? 什么是mmap? 上图说了,mmap是操作这些设备的一种方法 ...

  5. Juicer自定义函数

    首先,先写自定义的方法: function (sex) { ; ; var Range = Max - Min; var Rand = Math.random(); var res = (Min + ...

  6. python复习之路-Day01

    数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和 ...

  7. 模拟admin组件自己开发stark组件之创建篇

    admin组件 admin组件为我们提供了针对django管理页面 我们先简短来看下django的admin组件的启动流程,注册流程,url匹配过程 启动注册 1. 扫描所有应用下的注册了应用中的ad ...

  8. 如何在OS X 10.9 Mavericks下安装Command Line Tools(命令行工具)

    随着OS X 10.9 于 2013年6月10日在旧金山WWDC(world wide developer conference)上发布.是首个不使用猫科动物命名的系统,而转用加利福尼亚的产物. 该系 ...

  9. Linux 服务器－－Iptables 端口转发

    日常Iptables 端口转发 需求:公司是局域网络,通过一个外网ip,进行互联网的访问.公司的云平台服务器在公网中,虚拟化平台中有一台内部服务器,用于公司某部门的使用,上面运行www 服务,ssh端 ...

  10. cocos2dx中快速完成一段可播放动画

    版本:cocos2dx 2.2.6 IDE: VS2012 语言:C++98 CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteF ...