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. My Test about Mat

    一.创建Mat >Mat a = cv::Mat(2,2,CV_32S,1); output:  [1,1; 1,1] >Mat a = cv::Mat(2,2,CV_32SC3,1); ...

  2. {Emgu}{C#}保存图片、视频等

    一.簡介 以前研究所的時候,有使用VC.NET 配合 OpenCV 做影像處理,這東西相當讚,可以省去不少開發時間,今天嘗試看看如何在Visual C# 2008 上使用 OpenCV. 以下引用 O ...

  3. hdu4261 Estimation[暴力dp+对顶堆]

    https://vjudge.net/problem/HDU-4261 对于一个长2000的数列划分最多25个块,每块代价为块内每个数与块内中位数差的绝对值之和,求最小总代价. 套路化地,设$f[i] ...

  4. WPF中Grid实现网格，表格样式通用类（转）

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  5. 连电子硬件行业都在开始使用 Git 了你还在等什么？

    连电子硬件行业都在开始使用 Git 了你还在等什么? 无论二进制还是文本 Git 都可以管理. 相对于电子行业传统的复制粘贴式的版本管理, git 的版本管理先进太多太多了,没有理由不用. 虽然做不到 ...

  6. C# Socket Post File

    ///<summary> ///向服务器发送混合型的请求,1:成功发送,0:发送失败 ///</summary> ///<param name="paranam ...

  7. protobuf接口调用报错：java.nio.charset.MalformedInputException: Input length = 1

    使用protobuf定义的接口api发起http请求报错,日志如下: [-- ::] DEBUG AbstractPool: - server updated, node=, server={ nod ...

  8. 基于EFCore的数据Cache实现

    .NetCore 内置缓存加入到EFCore操作中,数据更新或者查询时自动更新缓存.github地址 2019-04-27 初步完成逻辑代码编写,尚未经过测试,诸多细节有待完善. 2019-04-28 ...

  9. Linux：WebServer（Apacge）

    / + 内容:表示在文本中搜索该内容: :q!:不保存直接退出: chown  -R  imooc:imooc /data:将 /data 文件夹的权限所有人该为用户 imooc: -R:采用递归的方 ...

  10. spring扩展点之一：BeanFactoryPostProcessor和BeanPostProcessor

    一.BeanFactoryPostProcessor和BeanPostProcessor的区别 BeanFactoryPostProcessor和BeanPostProcessor都是spring初始 ...