VisJS 随机图

VisJS 随机图

大家好,又见面了,我是全栈君。

VisJS 随机图

<!doctype html>
<html>
<head>
    <title>Random nodes</title>
    
    <style type="text/css">
        body {
            font: 13pt "courier new";
        }
        #mynetwork {
            width: 600px;
            height: 600px;
            border: 8px solid blueviolet;
        }
    </style>
    
    <script type="text/javascript" src="VisJS/dist/vis.js"></script>
    
    <script type="text/javascript">
        function draw(){
            var nodes = [];
            var edges = [];
            var countConnected = [];
            var nodeCount = document.getElementById( "nodeCount" ).value;
            for( var i = 0; i < nodeCount; ++i ){
                nodes.push( { id: i, label: String( i ) } );
                countConnected[i] = 0;
                if( i == 1 ){
                    edges.push( { from: i, to: 0 } );
                    countConnected[i]++;
                    countConnected[0]++;
                }
                else if( i > 1 ){
                    var rand = Math.floor( Math.random() * edges.length * 2 );
                    var limit = countConnected.length;
                    var val = 0;
                    var j = 0;
                    while( val < rand && j < limit ){
                        val += countConnected[j];
                        j++;
                    }
                    edges.push( { from: i, to: j } );
                    countConnected[i]++;
                    countConnected[j]++;
                }
            }
            var container = document.getElementById( "mynetwork" );
            var data = { nodes: nodes, edges: edges };
            var options = { edges: {}, stabilize: false };
            var net = new vis.Network( container, data, options );
        }
    </script>
</head>

<body onload="draw();">
    <form onsubmit="draw(); return false;">
        <label for="nodeCount">Number of nodes:</label>
        <input id="nodeCount" type="text" value="10" style="width: 50px;">
        <input type="submit" value="Go">
    </form>

    <br>

    <div id="mynetwork"></div>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/115529.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • navicat15永久激活码最新【2021免费激活】[通俗易懂]

    (navicat15永久激活码最新)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月30日
  • ORACLE 存储过程死锁[通俗易懂]

    ORACLE 存储过程死锁[通俗易懂]/**问题描述:在编译某个存储过程时,由于没提交或断网或者TEST没停止又重新编译,导致编译存过一直卡死问题分析:存储过程或某张表被锁例如:存储过程p_BonusMID死锁,表现的现象是在编译时无响应。**/–首先使用下面语句查询存过(存储过程)p_BonusMID的进程SELECT*FROMV$DB_OBJECT_CACHEWHEREname=UPPER(‘

    2022年7月17日
  • 递归数列是什么_数列递归

    递归数列是什么_数列递归递归数列-递归数列    (recursivesequence):一种用归纳方法给定的数列。递归数列-举例    例如,等比数列可以用归纳方法来定义,先定义第一项a1的值(a1≠0),对于以后的项,用递推公式an+1=qan(q≠0,n=1,2,…)给出定义。一般地,递归数列的前k项a1,a2,…,ak为已知数,从第k+1项起,由某一递推公式a

    2022年9月11日
  • Chain of Responsibility职责链[通俗易懂]

    Chain of Responsibility职责链[通俗易懂]职责链 Chain of Responsibility动机模式定义实例结构要点总结笔记动机在软件构建过程中,一个请求可能被多个对象处理.但是每个请求在运行时只能有一个请求者.如果显示指定.将必不可少地带来请求发送者与接收者地紧耦合如何使请求地发送者不需要指定具体地接收者?让请求地接收者自己在运行时决定来处理请求,从而使两者解耦模式定义使多个对象都有机会处理请求 从而避免请求地发送者和接收者之间地耦合关系.将这些对象形成一条链.并沿着这条链传递请求.直到有一个对象处理它为止实例#include&

    2022年8月9日
  • 知易Cocos2D-iPhone 游戏开发教程006

    知易Cocos2D-iPhone 游戏开发教程006

    2021年8月17日
  • app与后台交互之间的几种安全认证机制

    app与后台交互之间的几种安全认证机制

    2022年2月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号