传送门：http://visjs.org/

demo代码

<!doctype html>

<html>

<head>

    <title>vis.js newwork Demo</title>

    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="../vis.js"></script>

    <link href="../vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        #mynetwork {

            width: 100%;

            height: 600px;

            border: 1px solid lightgray;

        }

        #hisLog {

            width: 100%;

            height: 200px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div id="mynetwork"></div>

    <button id='addTo' value="Begin AddTo">Begin AddTo</button>

    <button id='stop_addTo' value="Stop AddTo">Stop AddTo</button>

    <button id='add_edge'>Begin Add Edge</button>

    <button id='stop_edge'>Stop Add Edge</button>

    <div id="hisLog"></div>

    <script src="./demo.js"></script>

</body>

</html>


var nodes = new vis.DataSet();

var edges = new vis.DataSet();

var container = document.getElementById('mynetwork');

var data = {

    nodes: nodes,

    edges: edges

};

var options = {};

var network = new vis.Network(container, data, options);

function addNode(id, label, title) {

    nodes.add({

        id: id,

        label: id

    })

    this.addHisLog('node:' + id + ' add to container.');

}

function addEdge(fromId, toId, type) {

    var edge = {

        from: fromId,

        to: toId,

    }

    if (type === 1) {

        edge['label'] = 'releation'

        edge.arrows = 'to'

        edge.color = 'red'

        edge.length = 400

    } else {

        edge['label'] = 'arrows:circle'

        edge.arrows = {

            to: {

                type: 'circle'

            }

        }

        edge.length = 200

    }

    edges.add(edge);

    this.addHisLog('edge:' + fromId + ' ---> ' + toId + ' .type:' + type + ' add to container.');

}

function randomGetNodeId() {

    var names = Object.getOwnPropertyNames(nodes._data);

    var len = names.length;

    var index = Math.floor(Math.random() * len);

    return names[index];

}

function randomAddNode() {

    var type = 0

    if (Math.random() > 0.7)

        type = 1

    var id = Date.now();

    var fId = this.randomGetNodeId()

    this.addNode(id, id, null)

    this.addEdge(fId, id, type)

}

function randomAddEdge() {

    var fId = this.randomGetNodeId()

    var tId = this.randomGetNodeId()

    if (fId == tId)

        return;

    var type = 0

    if (Math.random() > 0.7)

        type = 1

    this.addEdge(fId, tId, type)

}

function addHisLog(message) {

    $('#hisLog').prepend('<div>' + message + '</div>')

    $('#hisLog div').remove('div:gt(8)')

}

network.on("click", function(params) {

    // randomAddNode()

    // if (params.nodes.length == 0)

    //     return;

    // var names = Object.getOwnPropertyNames(nodes._data);

    // var len = names.length;

    // var index = Math.floor(Math.random() * len);

    // var _edgeId = names[index]

    // var id = Date.now();

    // nodes.add({

    //     id: id,

    //     label: id

    // })

    // var edge = {

    //     from: params.nodes[0],

    //     to: id,

    // }

    // if (Math.random() > 0.5) {

    //     edge['label'] = 'releation'

    //     edge.arrows = 'to'

    //     edge.color = 'red'

    // } else {

    //     edge['label'] = '父子'

    //     edge.arrows = {

    //         to: {

    //             type: 'circle'

    //         }

    //     }

    // }

    // edges.add(edge);

});

$('#addTo').click(function() {

    _setIntervalId = setInterval(randomAddNode, 400)

})

$('#stop_addTo').click(function() {

    clearInterval(_setIntervalId)

})

$('#add_edge').click(function() {

    _setIntervalId2 = setInterval(randomAddEdge, 400)

})

$('#stop_edge').click(function() {

    clearInterval(_setIntervalId2)

})

发现一个很N且免费的html5拓扑图 关系图 生成组件的更多相关文章

  1. 如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具，OKHttp的拦截器（何为拦截器？就是在每次发送网络请求的时候都会走的一个回调）大概效果如下：

    如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具,OKHttp的拦截器(何为拦截器?就是在每次发送网络请求的时候都会走的一个回调 ...

  2. 翻了翻element-ui源码，发现一个很实用的指令clickoutside

    前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细.今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分 ...

  3. 发现一个很好的android开发笔记库

    http://linux.linuxidc.com/ 密码和用户名都是www.linuxidc.com android基础教程到高手进阶,游戏开发,数据存储,android架构等.谢谢网站主分享!

  4. 发现DELL笔记本一个很弱智的问题

    以前用联想的笔记本,最近联想笔记本坏了,用的是公司的DELL笔记本,发现DELL笔记本一个很弱智的问题. 关于禁用触摸板的问题. 起因: 由于要经常写程序,我配置的有有线鼠标,但是打字时经常碰到触摸板 ...

  5. 平时没有怎么用Excel做 加减乘除 计算，猛地发现，其实Excel 是一个很好的简单计算器

    平时没有怎么用Excel做 加减乘除 计算,猛地发现,其实Excel 是一个很好的简单计算器

  6. 一个很不错的bash脚本编写教程

    转自 http://blog.chinaunix.net/uid-20328094-id-95121.html 一个很不错的bash脚本编写教程,至少没接触过BASH的也能看懂! 建立一个脚本 Lin ...

  7. linux 下程序员专用搜索源码用来替代grep的软件ack(后来发现一个更快的: ag)， 且有vim插件的

    发现一个比ack更快更好用的:  https://github.com/ggreer/the_silver_searcher   , 使用时命令为ag,它是基于ack的代码二次开发的,所有使用方法基本 ...

  8. [前端开发] 8 个很有用的免费CSS的UI工具箱

    搞web开发的不能不提到前端,下面就和大家分享下8个很有用的免费CSS的UI工具箱 1) UI CSS ui.css 是一个用来创建简洁的 Web 用户界面的工具,下载的文件只包含一个 css 文件. ...

  9. [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office

    打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...

随机推荐

  1. 一个查询ip地址的mysql数据库--ip2nation

    http://ip2nation.com/ip2nation/Sample_Scripts/Country_Based_Redirect 并且已经集成进了laravel:https://github. ...

  2. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  3. python第十九课——random模块中的常用函数

    1.random():返回一个[0,1)的随机浮点数(双精度浮点数) 2.uniform(a,b): 返回[a,b]之间的一个随机浮点数(双精度浮点数) [注意]a和b接受的数据大小随意 例如:3.r ...

  4. php5.5.* mysqlnd驱动安装

    1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...

  5. CF613D:Kingdom and its Cities(树形DP,虚树)

    Description 一个王国有n座城市,城市之间由n-1条道路相连,形成一个树结构,国王决定将一些城市设为重要城市. 这个国家有的时候会遭受外敌入侵,重要城市由于加强了防护,一定不会被占领.而非重 ...

  6. 1051. [HAOI2006]受欢迎的牛【强连通分量】

    Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...

  7. 1433. [ZJOI2009]假期的宿舍【二分图】

    Description 学校放假了······有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如A 和B都是学校的学生,A要回家,而C来看B,C与A不认识.我们假设每个人只能 ...

  8. java基础面试题(JVM篇)

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java 虚拟机是一个可以执行 Java 字节码的虚拟机进程.Java 源文件被编译成能被 Java 虚拟机执行的字节码文件. ...

  9. repulsion-loss

    行人检测中的mr,fppi这些指标??? 3种距离:欧式距离.SmoothL1距离.IoU距离 总的loss公式:3个部分组成Lattr是预测框和匹配的gt尽可能接近,Lrepgt是预测框和周围没匹配 ...

  10. new的三种形态

    C++语言一直被认为是复杂编程语言中的杰出代表之一,不仅仅是因为其繁缛的语法规则,还因为其晦涩的术语.下面要讲的就是你的老熟人—new: 它是一个内存管理的操作符,能够从堆中划分一块区域,自动调用构造 ...