传送门：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. windows安装及配置mysql5.7

    引子 mysql官方网站上没有 windows mysql5.7 64位版本msi的安装包下载,我们可以通过zip版本解压缩后手动安装配置环境. msi安装的话有32位的,基本上就是看着图形界面来一步 ...

  2. playfair

    又是一道实验吧的题,哈哈,我比较弱. 因为题目写了play我首先想到的是playfair,好,下面先看下百科 好了,已知了密钥: 所以有: s n f m th b g o ui c j p vy d ...

  3. Hyper-v 中 CentOS 连接外网之有线网卡

    一.打开虚拟机交换管理器,查看默认的虚拟交换机 如果不是内部网络,则需要新建一个虚拟交换机,新的交换机应该使用内部网络: 二.配置虚拟机使用的交换机.如果 “默认开关” 不是内部网络,需要使用自己新创 ...

  4. 在yii中使用memcache

    yii中可以很方便的使用memcache 一.配置在main.php的components中加入cache配置 array( 'components'=>array( 'cache'=>a ...

  5. 隐马尔可夫（HMM）模型

    隐马尔可夫(HMM)模型 隐马尔可夫模型,是一种概率图模型,一种著名的有向图模型,一种判别式模型.主要用于时许数据建模,在语音识别.自然语言处理等领域广泛应用. 概率图模型分为两类,一类:使用有向无环 ...

  6. 有关linqtosql和EF的区别

    LINQ to SQL和Entity Framework都是一种包含LINQ功能的对象关系映射技术.他们之间的本质区别在于EF对数据库架构和我们查询的类型实行了更好的解耦.使用EF,我们查询的对象不再 ...

  7. select、poll 和epoll区别

    阻塞 I/O(blocking IO) 当用户进程调用了recvfrom这个系统调用,kernel就开始了IO的第一个阶段:准备数据(对于网络IO来说,很多时候数据在一开始还没有到达.比如,还没有收到 ...

  8. python3 mock

    mock的官网学习备忘录:官网地址https://docs.python.org/3/library/unittest.mock.html#quick-guide 1,安装 python3 unitt ...

  9. windows 下nginx配置php支持

    修改nginx配置 location ~ \.php$ { root D:/Learn/php/test/; fastcgi_pass ; fastcgi_index index.php; fastc ...

  10. 你的安全设置不允许网站使用安装在你的计算机上的ActiveX控件

    在IE中,工具--INTERNET选项--安全--自定义级别--"下载未签名的ActiveX控件"选项改成"提示"或"允许"就好了.