作者:mobiledu2502862777 | 来源:互联网 | 2023-05-17 14:17
传送门:http://visjs.org/
demo代码
<!doctype html>
href="../vis.css" rel="stylesheet" type="text/css" />
id="mynetwork">
id="hisLog">
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('' + message + '
')
$('#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)
})