专栏首页calvin发现一个很N且免费的html5拓扑图 关系图 生成组件

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

传送门: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)
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • .net core 源码解析-web app是如何启动并接收处理请求(二) kestrel的启动

    上篇讲到.net core web app是如何启动并接受请求的,下面接着探索kestrel server是如何完成此任务的。

    旺财的城堡
  • 扩展htmlhelper.DropDownListFor 支持list数据源和option增加属性

    mvc自带的DropDownListFor数据源必须是IEnumerable<SelectListItem>。并且option不支持增加自定义属性。在使用boo...

    旺财的城堡
  • 【nodejs】让nodejs像后端mvc框架(asp.net mvc)一样处理请求--参数自动映射篇(6/8)

    路由、action的扫描、发现、注册搞定之后,后来我发现在我们的action里面获取参数往往都是通过request对象来一个一个获取。同样的一行代码我们不厌其烦...

    旺财的城堡
  • 当Kotlin遇见数据结构丨哈夫曼解码

    哈夫曼编码是一种编码格式,属于可变字长编码的一种,该方法依照字符出现的概率来构建异字头的平均长度最短的码字,最终实现根据使用频率来最大化节省码字(字符)的存储空...

    码脑
  • Linux Shell 中的 ()、(())、[]、[[]]、{} 怎么用是不是还傻傻分不清?

    ①命令组。括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用。括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命...

    昱良
  • 对象储存cos-腾讯云对象储存cos

    COS是腾讯云提供的对象存储服务,功能非常强大,可以作为文件服务器,CDN加速,静态网页服务,还提供了图片的常用操作。

    张天华
  • 腾讯云对象储存cos的配置方法简单说明

    COS是腾讯云提供的对象存储服务,功能非常强大,可以作为文件服务器,CDN加速,静态网页服务,还提供了图片的常用操作。相关API文档:https://cloud...

    主机优惠教程
  • 第53天:鼠标事件、event事件对象

    -->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果

    半指温柔乐
  • Docker容器学习梳理--Volume数据卷使用

    之前部署了Docker容器学习梳理--基础环境安装,接下来看看Docker Volume的使用。 Docker volume使用 Docker中的数据可以存储在...

    洗尽了浮华
  • 当Kotlin遇见数据结构丨使用哈夫曼编码压缩文件

    哈夫曼编码是一种编码格式,属于可变字长编码的一种,该方法依照字符出现的概率来构建异字头的平均长度最短的码字,最终实现根据使用频率来最大化节省码字(字符)的存储空...

    码脑

扫码关注云+社区

领取腾讯云代金券