2019-05-06 12:04:01 +00:00
|
|
|
<html>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
|
|
|
|
|
<div id="mynetwork" style = "background-color: grey;"></div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var color = 'gray';
|
|
|
|
|
|
2019-10-04 14:53:28 +00:00
|
|
|
var nodes = [{{ nodes | safe }}] ;
|
2019-05-06 21:56:23 +00:00
|
|
|
|
2019-10-04 14:53:28 +00:00
|
|
|
var edges = [{{ edges | safe }}] ;
|
2020-09-26 16:26:50 +00:00
|
|
|
console.log(nodes, edges);
|
2019-05-06 12:04:01 +00:00
|
|
|
// create a network
|
|
|
|
|
var container = document.getElementById('mynetwork');
|
|
|
|
|
var data = {
|
|
|
|
|
nodes: nodes,
|
|
|
|
|
edges: edges
|
|
|
|
|
};
|
|
|
|
|
var options = {
|
|
|
|
|
autoResize: true,
|
|
|
|
|
layout: {
|
|
|
|
|
improvedLayout:true,
|
|
|
|
|
randomSeed: 10,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
nodes: {
|
|
|
|
|
shape: 'dot',
|
|
|
|
|
size: 8,
|
|
|
|
|
font: {
|
|
|
|
|
size: 5,
|
|
|
|
|
color: '#ffffff'
|
|
|
|
|
},
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
},
|
|
|
|
|
edges: {
|
|
|
|
|
width: 1,
|
|
|
|
|
color: {
|
|
|
|
|
color:'#356b6b',
|
|
|
|
|
highlight:'#4286f4',
|
|
|
|
|
hover: '#41f4f4',
|
|
|
|
|
inherit: 'from',
|
|
|
|
|
opacity:1.0
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
interaction: {
|
|
|
|
|
hoverConnectedEdges: true,
|
|
|
|
|
tooltipDelay: 200
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
network = new vis.Network(container, data, options);
|
|
|
|
|
network.on("stabilizationIterationsDone", function () {
|
|
|
|
|
network.setOptions( { physics: false } );
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
