传送门：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. XXX esx.problem.hyperthreading.unmitigated.formatOnHost not found XXX (Build 9313334)

    昨天把一台服务器(VMware ESXi, 6.0.0, 5572656)更新了一下补丁,更新到最新版(VMware ESXi, 6.0.0, 9313334),服务器重启后,vCenter出现以下错 ...

  2. Js 运算符(加减乘除)

    1.加法 + +NaN //NaN,有一个为NaN就为NaN var box=Infinity+Infinity //Infinity var box=-Infinity + -Infinity // ...

  3. November 7th 2016 Week 46th Monday

    A friend is one who knows you and loves you just the same. 朋友是懂你并爱你的人. Friendship means inclusion, l ...

  4. [2018HN省队集训D5T1] 沼泽地marshland

    [2018HN省队集训D5T1] 沼泽地marshland 题意 给定一张 \(n\times n\) 的棋盘, 对于位置 \((x,y)\), 若 \(x+y\) 为奇数则可能有一个正权值. 你可以 ...

  5. 我遇到的问题:耗时久/效率低 ---> 应对方案: 行动-结果指向

    这一篇打的时候,时间都挺靠后的了, 当时出现错误,很慌了,一个是时间比较久,5点多了,一个是陈果已经做了很多题了,这些是事实. 导致我慌张的原因,简单来说是比较,长久以来,我都爱去和别人比较.如果赢了 ...

  6. 12-5 张雨RTCM3数据解码解不出的原因

    数据大小:75kB 时间12-4 原因:二进制数据乱码,未通过电文头检验 2018-12-10 08:44:05 张雨RTCM32-MSM4无法固定,连差分都没有

  7. Laravel中如何将单个routes.php分割成多个子文件

    随着业务逻辑越来越复杂,routes.php文件也会变得越来越庞大,为了便于管理,我们可以像管理配置文件那样将其分割成多个子文件,这实现起来很简单: // app/routes.php ... // ...

  8. 使用transient关键字解决ehcache序列化错误

    使用Ehcache时发现个不起眼的小问题 在一个Model中有以下代码: public class MyModel implements Serializable { private static f ...

  9. regex_replace

    Regex_iterator方法需要输入一个正则表达式,以及一个用于替换匹配的字符串的格式化字符串:这个格式化的字符串可以通过表的转义序列引用匹配子字符串的部分内容: 转义序列 $n 替换第n个捕获的 ...

  10. KMP算法用JavaScript实现

    KMP算法是字符串匹配的经典算法,简称 看毛片, 理论知识请直接看阮一峰老师的这篇文章,我看完文章之后尝试对算法进行了实现. 一句话总结KMP算法的核心思想:就是跳过已经对比的部分 而KMP算法的核心 ...