You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.9 KiB
106 lines
2.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../dist/vis.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
|
|
|
|
<style>
|
|
#network {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: 1px solid gray;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
function addChild(Parent){
|
|
|
|
var newNodes = 5;
|
|
var angle = 2* Math.PI / newNodes;
|
|
var r = 150;
|
|
var shift = Math.random() * Math.PI;
|
|
|
|
for(i=0; i< newNodes; i++) {
|
|
|
|
var xnew = network.getPositions(Parent)[Parent].x + Math.cos(angle * i + shift) * r;
|
|
var ynew = network.getPositions(Parent)[Parent].y + Math.sin(angle * i + shift) * r;
|
|
|
|
var newId = guid();
|
|
|
|
try {
|
|
nodes.add(
|
|
{id: newId,
|
|
label: "New Node",
|
|
x: xnew,
|
|
y: ynew })
|
|
}
|
|
|
|
catch (err) {}
|
|
|
|
var edgeId = guid();
|
|
|
|
try {
|
|
edges.add(
|
|
{id: edgeId,
|
|
from: Parent,
|
|
to: newId})
|
|
}
|
|
|
|
catch (err) {}
|
|
|
|
}
|
|
};
|
|
|
|
|
|
function guid() {
|
|
function s4() {
|
|
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
|
}
|
|
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
|
|
s4() + '-' + s4() + s4() + s4();
|
|
};
|
|
|
|
|
|
|
|
var nodes, edges, network;
|
|
|
|
function draw() {
|
|
nodes = new vis.DataSet([
|
|
{"id": "1",
|
|
"label": "Start"}]);
|
|
|
|
edges = new vis.DataSet([]);
|
|
|
|
var container = document.getElementById('network');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var options = {
|
|
"edges": {arrows:'to', "smooth": {"type": 'dynamic'}},
|
|
"physics": {
|
|
"forceAtlas2Based": {
|
|
"gravitationalConstant": -514,
|
|
"springLength": 150,
|
|
"springConstant": 0.1,
|
|
"damping": 0.9},
|
|
"maxVelocity": 15,
|
|
"minVelocity": 1,
|
|
"timestep": 0.9,
|
|
"solver": "forceAtlas2Based"}};
|
|
network = new vis.Network(container, data, options);
|
|
network.fit();
|
|
|
|
network.on("click", function (params) {
|
|
if(params.nodes[0]!=null){addChild(params.nodes[0])}});
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="draw();">
|
|
<div id="network"></div>
|
|
</body>
|
|
</html>
|