发现一个很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)
})
posted @   czd890  阅读(13434)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手