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. pat甲级 1155 Heap Paths （30 分）

    In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...

  2. 《DSP using MATLAB》示例Example7.24

    代码: ws1 = 0.2*pi; wp1 = 0.35*pi; wp2 = 0.65*pi; ws2 = 0.8*pi; Rp = 1.0; As = 60; [delta1, delta2] = ...

  3. python string 之 format

    python 在 2.6之后支持了string的format功能, 很强大, 应该成为使用习惯. http://blog.csdn.net/handsomekang/article/details/9 ...

  4. elixir mix开发入门

    备注: 简单使用mix 进行项目的生成,同时添加docker 构建支持 1. 生成项目 mix new mydemoproject 输出信息如下: * creating README.md * cre ...

  5. Automating CSS Regression Testing

    The following is a guest post by Garris Shipon . We've touched on the four types of CSS testing here ...

  6. oracle之 11g RAC R2 体系结构---Grid

    -- 查看cluster 所维护的资源列表,不包括 OHAS 栈的 daemon [root@node1 bin]# ./crsctl status resource -t-------------- ...

  7. oracle 内存分配和调优 总结

    一直都想总结一下oracle内存调整方面的知识,最近正好优化一个数据库内存参数,查找一些资料并且google很多下.现在记录下来,做下备份.           一.概述:              ...

  8. 4.JMeter聚合报告分析

    1.Label:每个Jmeter的element的Name值 2.Samples:发出的请求数量 3.Average:平均响应时间 4.Median:表示50%用户的响应时间 5.90%Line:90 ...

  9. java 简洁的分层实现

    1.分页实现 分页实现是将所有查询结果保存在session对象或集合中,翻页时从session对象或集合中取出一页所需的数据显示.但是这种方法有两个最主要的缺点:一是用户看到的可能是过期数据:二是如果 ...

  10. Python2 和 Python3 的区别（待完善）

    1.宏观上 python2 :源码不标准,混乱,重复代码太多 python3 :统一 标准,去除重复代码. 2. print python2 :括号可有可无 print(a)  或  print ap ...