传送门：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. Hadoop HBase概念学习系列之优秀行键设计（十六）

    我们通过行键访问HBase.尽管使用扫描过滤器可以一次性指明大量的键,但是HBase仅仅能够根据行键识别出一行. 优秀的行键设计可以保证良好的HBase性能. 1.行键存在于HBase中的每一个单元格 ...

  2. AltiumDesigner元器件搜索中英文对照

    个人常用 扬声器 spearker 计量表(电流表,电压表) meter 变压器 Trans CT 肖特基二极管 D Schotty 额外补充 英文名称       中文释义 2N3904  NPN型 ...

  3. 什么是SEO服务，企业为什么要做SEO？

    SEO服务: 1. 网站提交服务 网站提交是非常重要的,尤其是英文网站(英文网站可以提交到世界各国比较出色的搜索引擎).网站的提交,增加了潜在客户找到网站的机会.网站的提交是一个不断更新的过程,因为搜 ...

  4. 前端面试总结——http、html和浏览器篇

    1.http和https https的SSL加密是在传输层实现的. (1)http和https的基本概念 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和 ...

  5. javascript库概念与连缀

    一.JavaScript 库 1.什么是javascript库: javascript库,说白了,就是把各种常用的代码片段,组织起来放在一个 js 文件里,组成一个包,这个包就是 JavaScript ...

  6. CentOS 7.4 yum安装LAMP环境

    配置防火墙,开启80.3306端口.CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. #停止firewall服务 systemctl stop firewa ...

  7. Linux配置CentOs7.4(网络连接处理)

    说明:CentOS 7.0默认安装好之后是没有自动开启网络连接的! 进入登录界面 账号输入root 回车 再输入上面设置的root密码回车 系统登录成功 设置IP地址.网关DNS cd  /etc/s ...

  8. npm发布插件步骤

    开发好一个插件后,要想让其他人也能使用该插件需要将插件发布到npm上,具体步骤如下: 1.添加npm用户: npm adduser Username: your name Password: your ...

  9. Kafka设计解析（十七）Kafka 0.11客户端集群管理工具AdminClient

    转载自 huxihx,原文链接 Kafka 0.11客户端集群管理工具AdminClient 很多用户都有直接使用程序API操作Kafka集群的需求.在0.11版本之前,kafka的服务器端代码(即添 ...

  10. 2018-2019赛季最后的随想/$\rm{NOIP2018}$游记·启示录

    他看着眼前的屏幕,静静地发呆. 他不知道迎接他的将会是什么,后天的\(\rm{NOIp}\)终究是个谜. 刚刚给机房里其他人讲完期望的他,打心底觉得自己没有讲好,但效果似乎还可以. "希望别 ...