81 lines
2.1 KiB
HTML
81 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Network | Playing with Physics</title>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font: 10pt sans;
|
|
}
|
|
#mynetwork {
|
|
float:left;
|
|
width: 600px;
|
|
height: 600px;
|
|
margin:5px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
#config {
|
|
float:left;
|
|
width: 400px;
|
|
height: 600px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script type="text/javascript" src="../exampleUtil.js"></script>
|
|
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
|
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script type="text/javascript">
|
|
var nodes = null;
|
|
var edges = null;
|
|
var network = null;
|
|
|
|
function draw() {
|
|
nodes = [];
|
|
edges = [];
|
|
// randomly create some nodes and edges
|
|
var data = getScaleFreeNetwork(60);
|
|
|
|
// create a network
|
|
var container = document.getElementById('mynetwork');
|
|
|
|
var options = {
|
|
physics: {
|
|
stabilization: false
|
|
},
|
|
configure: {
|
|
filter:function (option, path) {
|
|
if (path.indexOf('physics') !== -1) {
|
|
return true;
|
|
}
|
|
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
container: document.getElementById('config')
|
|
}
|
|
};
|
|
network = new vis.Network(container, data, options);
|
|
}
|
|
</script>
|
|
<script src="../../googleAnalytics.js"></script>
|
|
</head>
|
|
|
|
<body onload="draw();">
|
|
|
|
<h2>Playing with Physics</h2>
|
|
<div style="width: 700px; font-size:14px; text-align: justify;">
|
|
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, the network configurator can be used
|
|
to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
|
|
settings you are happy with, you can supply them to network using the documented physics options.
|
|
</div>
|
|
<br />
|
|
<div id="mynetwork"></div>
|
|
<div id="config"></div>
|
|
|
|
<p id="selection"></p>
|
|
</body>
|
|
</html>
|