|
|
- <!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-network.min.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>
-
- </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>
|
