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. CaptureMouse/CaptureStylus 可能会失败

    在 WPF 中,如果我们要做拖动效果,通常会调用一下 CaptureMouse/CaptureStylus 以便当鼠标或手指离开控件的时候依然能够响应 Move 和 Up 事件.不知有没有注意到这两个 ...

  2. 【mongodb】Mongodb初识

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  3. CentOS常用基础命令汇总

    1.关机 (系统的关机.重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours: ...

  4. [转]50个很棒的Python模块

    转自:http://www.cnblogs.com/foxhengxing/archive/2011/07/29/2120897.html Python具有强大的扩展能力,以下列出了50个很棒的Pyt ...

  5. verilog中的有符号数理解（转）

    verilog中的有符号数运算 有符号数的计算:若有需要关于有号数的计算,应当利用Verilog 2001所提供的signed及$signed()机制. Ex: input  signed [7:0] ...

  6. exec 和 exec_

    exec_ 是six里面针对py2 , py3 兼容,  而做的重新定义.  和 exec 功能一样. 关键一点是:   exec 是一个语法声明,不是一个函数.  也就是说和if,for一样. ex ...

  7. ballerina 学习三 根据swagger 以及protobuf 生成code

    备注: 基本环境安装就不用介绍了,swagger 以及grpc 同时也不用介绍了,都是比较简单的代码,就是一个简单的测试 1.   初始化项目 ballerina init 项目结构如下: ├── R ...

  8. keycloak 了解

    Keycloak 是一个针对Web应用和 RESTful Web 服务提供 SSO 集成.基于 OAuth 2.0 和 JSON Web Token(JWT) 规范.目前用于实现 JBoss 与 Wi ...

  9. 理解AI的角度

    <经济学人>去年出了一期很经典的封面,封面里将全球各大高科技平台企业如谷歌.亚马逊之许描绘成正在采油的钻井,寓意很明显,在数字经济时代,大平台正在开采数字化的石油——大数据,而开采出来的大 ...

  10. google adwords report相关类型

    (来自enum的ReportDefinitionReportType) KEYWORDS_PERFORMANCE_REPORT,    AD_PERFORMANCE_REPORT,    URL_PE ...