Alex de Mulder
9 years ago
6 changed files with 115 additions and 160 deletions
Split View
Diff Options
-
+1 -0HISTORY.md
-
+39 -29dist/vis.js
-
+14 -18lib/network/modules/components/Edge.js
-
+7 -8lib/network/modules/components/Node.js
-
+20 -6lib/util.js
-
+34 -99test/networkTest.html
+ 1
- 0
HISTORY.md
View File
+ 39
- 29
dist/vis.js
View File
+ 14
- 18
lib/network/modules/components/Edge.js
View File
+ 7
- 8
lib/network/modules/components/Node.js
View File
+ 20
- 6
lib/util.js
View File
+ 34
- 99
test/networkTest.html
View File
| @ -1,122 +1,57 @@ | |||
| <!doctype html> | |||
| <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> | |||
| <html> | |||
| <head> | |||
| <meta http-equiv="content-type" content="text/html; charset=UTF8"> | |||
| <title>Network | Static smooth curves - World Cup Network</title> | |||
| <title>Network | Basic usage</title> | |||
| <script type="text/javascript" src="../dist/vis.js"></script> | |||
| <link type="text/css" rel="stylesheet" href="../dist/vis.css"> | |||
| <link href="../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| <style type="text/css"> | |||
| #mynetwork { | |||
| width: 800px; | |||
| height: 800px; | |||
| width: 600px; | |||
| height: 400px; | |||
| border: 1px solid lightgray; | |||
| } | |||
| </style> | |||
| <script src="../../googleAnalytics.js"></script> | |||
| </head> | |||
| <body> | |||
| <h2>Performance - World Cup Network</h2> | |||
| <div style="width:700px; font-size:14px;"> | |||
| This example shows the performance of vis with a larger network. The edges in | |||
| particular (~9200) are very computationally intensive | |||
| to draw. Drag and hold the graph to see the performance difference if the | |||
| edges are hidden. | |||
| <br/><br/> | |||
| We use the following physics configuration: <br/> | |||
| <code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001, | |||
| springLength: 200}}</code> | |||
| <br/><br/> | |||
| </div> | |||
| <p> | |||
| Create a simple network with some nodes and edges. | |||
| </p> | |||
| <div id="mynetwork"></div> | |||
| <script type="text/javascript"> | |||
| var network; | |||
| function loadJSON(path, success, error) { | |||
| var xhr = new XMLHttpRequest(); | |||
| xhr.onreadystatechange = function () { | |||
| if (xhr.readyState === 4) { | |||
| if (xhr.status === 200) { | |||
| success(JSON.parse(xhr.responseText)); | |||
| } | |||
| else { | |||
| error(xhr); | |||
| } | |||
| } | |||
| }; | |||
| xhr.open('GET', path, true); | |||
| xhr.send(); | |||
| } | |||
| // create an array with nodes | |||
| var nodes = new vis.DataSet([ | |||
| {id: 1, label: 'N1'}, | |||
| {id: 2, label: 'N2'} | |||
| ]); | |||
| var edges = new vis.DataSet([ | |||
| {id: '1%2', from: 1, to: 2}, | |||
| {id: '2%1',from: 2, to: 1} | |||
| ]); | |||
| var container = document.getElementById('mynetwork'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var options = {edges:{arrows:'to'}}; | |||
| var network = new vis.Network(container, data, options); | |||
| edges.update({id: '1%2', arrows:{from:{enabled:true}}}); | |||
| edges.update({id: '1%2', arrows: null}); | |||
| // | |||
| // edges.update({id: '1%2', width: 20}); | |||
| // also try after: | |||
| // edges.update({id: '2%1', color: '#00ff00'}); | |||
| function redrawAll(data) { | |||
| // remove positoins | |||
| // for (var i = 0; i < nodes.length; i++) { | |||
| // delete nodes[i].x; | |||
| // delete nodes[i].y; | |||
| // } | |||
| // create a network | |||
| var container = document.getElementById('mynetwork'); | |||
| console.log(data) | |||
| var options = { | |||
| edges:{ | |||
| // smooth:false, | |||
| }, | |||
| layout:{ | |||
| improvedLayout:false | |||
| }, | |||
| interaction: { | |||
| hideEdgesOnDrag: true, | |||
| keyboard: true, | |||
| multiselect: true | |||
| }, | |||
| physics: { | |||
| enabled: true, | |||
| solver: 'forceAtlas2Based', | |||
| forceAtlas2Based: { | |||
| gravitationalConstant: -100, | |||
| springConstant: 0.40, | |||
| springLength: 50, | |||
| damping: 0.1, | |||
| avoidOverlap: 0 | |||
| }, | |||
| stabilization: { | |||
| enabled: true, | |||
| iterations: 1000, | |||
| fit: true | |||
| }, | |||
| timestep: 0.5 | |||
| } | |||
| }; | |||
| // Note: data is coming from ./datasources/WorldCup2014.js | |||
| network = new vis.Network(container, data, options); | |||
| network.on("startStabilizing", function (params) { | |||
| console.log("started") | |||
| }); | |||
| network.on("stabilizationProgress", function (params) { | |||
| console.log("progress:",params); | |||
| }); | |||
| network.on("stabilizationIterationsDone", function (params) { | |||
| console.log("finished stabilization interations"); | |||
| }); | |||
| network.on("stabilized", function (params) { | |||
| console.log("stabilized!", params); | |||
| }); | |||
| } | |||
| loadJSON('./dataTest.json', redrawAll, function(err) {console.log('error')}); | |||
| </script> | |||
| </body> | |||
| </html> | |||