Mon 21 Jul 22:43:21 CEST 2025
This commit is contained in:
parent
2f8b154fc7
commit
a05cebd588
|
@ -0,0 +1,80 @@
|
|||
<!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>
|
Loading…
Reference in New Issue
Block a user