|
|
- <!doctype html>
- <html>
- <head>
- <title>Graph | Playing with Physics</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mygraph {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
- </style>
-
- <script type="text/javascript" src="../../dist/vis.js"></script>
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var graph = null;
-
- function draw() {
- nodes = [];
- edges = [];
- var connectionCount = [];
-
- // randomly create some nodes and edges
- var nodeCount = document.getElementById('nodeCount').value;
- for (var i = 0; i < nodeCount; i++) {
- nodes.push({
- id: i,
- label: String(i)
- });
-
- connectionCount[i] = 0;
-
- // create edges in a scale-free-graph way
- if (i == 1) {
- var from = i;
- var to = 0;
- edges.push({
- from: from,
- to: to
- });
- connectionCount[from]++;
- connectionCount[to]++;
- }
- else if (i > 1) {
- var conn = edges.length * 2;
- var rand = Math.floor(Math.random() * conn);
- var cum = 0;
- var j = 0;
- while (j < connectionCount.length && cum < rand) {
- cum += connectionCount[j];
- j++;
- }
-
-
- var from = i;
- var to = j;
- edges.push({
- from: from,
- to: to
- });
- connectionCount[from]++;
- connectionCount[to]++;
- }
- }
-
- // create a graph
- var container = document.getElementById('mygraph');
- var data = {
- nodes: nodes,
- edges: edges
- };
-
- var options = {
- edges: {
- },
- stabilize: false,
- configurePhysics:true
- };
- graph = new vis.Graph(container, data, options);
-
- // add event listeners
- graph.on('select', function(params) {
- document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
- });
- }
- </script>
- </head>
-
- <body onload="draw();">
-
- <h2>Playing with Physics</h2>
- <div style="width: 700px; font-size:14px;">
- Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
- that the user can use 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 graph using the documented physics options.
-
- On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
- </div>
- <br />
- <form onsubmit="draw(); return false;">
- <label for="nodeCount">Number of nodes:</label>
- <input id="nodeCount" type="text" value="25" style="width: 50px;">
- <input type="submit" value="Go">
- </form>
-
- <br>
-
- <div id="mygraph"></div>
-
- <p id="selection"></p>
- </body>
- </html>
|
