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. FastJson的一些使用

    前言 最近经常使用json的一些转换,使用的是fastjson,所以就对fastjson进行了一些汇总,记录下来. 正文 主要的api 首先是一些类库的说明: SerializeWriter:相当于S ...

  2. 深入了解 WPF Dispatcher 的工作原理（PushFrame 部分）

    在上一篇文章 深入了解 WPF Dispatcher 的工作原理(Invoke/InvokeAsync 部分) 中我们发现 Dispatcher.Invoke 方法内部是靠 Dispatcher.Pu ...

  3. flask第十四篇——重定向

    我们都知道京东的url是www.jd.com,但是当你输入www.jingdong.com时候,你会发现地址自动跳转到了www.jd.com,这种技术手段就叫做重定向. 重定向分为永久重定向和临时重定 ...

  4. 使用service&scope 进行注入

    @service 声明该类为一个bean,bean的名称为类名首字母小写(customerService) @Scope("prototype")则声明为一个原子类型,既每个get ...

  5. html页面设置一个跟随鼠标移动的DIV（jQuery实现）

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

  6. hashids 了解

    用于隐藏真实的id 原理是从数字经过一个加盐(salted)算法产生一个哈希(hash)字符串.这样算法就是通过混淆使结果具有不可预测性,而唯一性依然由数字本身来达成,从而得到(类似 youtube ...

  7. Google Chrome 调试JS简单教程[更新]

    题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...

  8. div,css常用技术

    1,<div></div>一张图作为背景的用法: 必须指定width,height,background属性 .smallCircle{ margin-top: 25px;   ...

  9. Docker生态会重蹈Hadoop的覆辙吗?

    从网上找到了这篇2016年中旬刷爆朋友圈的文章,没有找到作者和首发出处.两年多过去了,文中分析的很多不确定性都有了结论,里面不少分析思路.观点还是很不错的. Docker的兴起和Hadoop何其相似 ...

  10. kali openvas安装

    最新的kali需要用apt-get安装后使用 安装 apt-get install openvas 自动设置 openvas-setup 检测设置 openvas-check-setup 如果检测没有 ...