vis.js is a dynamic, browser-based visualization library
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.
 
 
 

80 lines
2.1 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>
#mynetwork {
width: 1400px;
height: 800px;
border: 1px solid gray;
}
</style>
</head>
<body onload="draw()">
<script src="https://rawgit.com/Tooa/6e17f2d7b8e34ef94719/raw/a10096a6b88c992c57d032b1ed3079d7cc4b1f51/data.js"></script>
<div id="mynetwork"></div>
<script>
function draw() {
nodes = [];
edges = [];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
nodes.push({id: 0, label: 'Root'});
nodes.push({id: 1, label: 'Child 1'});
nodes.push({id: 2, label: 'Child 2'});
nodes.push({id: 3, label: 'Child 3'});
nodes.push({id: 4, label: 'Child 2.1'});
nodes.push({id: 5, label: 'Child 2.1.1'});
nodes.push({id: 6, label: 'Child 2.1.2'});
nodes.push({id: 7, label: 'Child 2.1.1.1'});
edges.push({from: 0, to: 1});
edges.push({from: 0, to: 2});
edges.push({from: 0, to: 3});
edges.push({from: 2, to: 4});
edges.push({from: 4, to: 5});
edges.push({from: 4, to: 6});
edges.push({from: 5, to: 7});
nodes[7].level = 0;
nodes[6].level = 1;
nodes[5].level = 1;
nodes[4].level = 2;
nodes[3].level = 3;
nodes[2].level = 3;
nodes[1].level = 3;
nodes[0].level = 4;
var options = {
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: 'horizontal',
roundness: 0.4
}
},
layout: {
hierarchical: {
direction: 'LR'
}
}
};
network = new vis.Network(container, data, options);
}
var network, nodes, edges;
</script>
</body>
</html>