传送门：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. 铁乐学Python_day10_函数2

    今天书接昨天的函数继续去学习了解: 昨天说到函数的动态参数. 1.函数的[动态参数] *args 动态参数,万能参数 args接受的就是实参对应的所有剩余的位置参数,并将其放在元组( )中. def ...

  2. spring-boot-jpa 自定义查询工具类

    1.pom文件中添加如下配置 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...

  3. Springboot 报application.properites文件找不到的解决方法

        部署项目遇到了找不到application.properties的问题.网上搜了找不到答案,后面经过测试发现,问题在于clean了maven之后,target包还没删除,所以编译的时候才会出现 ...

  4. 一段滚动文字的js (jQuery)

    function startmarqueeOneSMS() { var t; var to; var ishover = false; var waitone = 3000; var speed = ...

  5. 自制年月选择插件 jquery.MyDatePicker v1.0beta

    参数: el: null, //默认值和位置从哪个文本框取,传入jquery对象 ,默认为this 用于按钮引发文本框的focus事件来弹出 viewtype: 'month', //日期控件模式 默 ...

  6. ZT CSDN 如何以最快的速度计算出一个二进制数中1的个数？ [

    一道算法面试题:如何以最快的速度计算出一个二进制数中1的个数? [问题点数:10分,结帖人weicai_chen] 收藏 weicai_chen weicai_chen 等级: 结帖率:95.12% ...

  7. Java基础知识强化之集合框架笔记80：HashMap的线程不安全性的体现

    1. HashMap 的线程不安全性的体现: 主要是下面两方面: (1)多线程环境下,多个线程同时resize()时候,容易产生死锁现象.即:resize死循环 (2)如果在使用迭代器的过程中有其他线 ...

  8. ubuntu16.04安装oracle常见问题

    报错信息: Err:2 http://us.archive.ubuntu.com/ubuntu xenial-updates/main amd64 libdrm2 amd64 2.4.83-1~16. ...

  9. Linux服务器之间免密同步文件、重启R服务

    机器:ML-01/ML-02/ML-03 需求: 1.在ML-01上自动将文件同步至ML-02/ML-03 2.在ML-01上通过脚本重启ML-02/ML-03上的R服务 说明:以下示例中,ML-02 ...

  10. [转] Eclipse安装SVN插件

    eclipse里安装SVN插件,一般来说,有三种方式: 1. 直接下载SVN插件,将其解压到eclipse的对应目录里 2. 使用eclipse 里Help菜单的“Install New Softwa ...