jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
jos 9 years ago
parent
1d47ca44b3 041c2c08ad
commit
1d2e92f7f4
42 changed files with 6116 additions and 5888 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4254
    -4124
      dist/vis.js
  2. +8
    -1
      docs/network/configure.html
  3. +31
    -4
      docs/network/index.html
  4. +1
    -1
      docs/network/physics.html
  5. +0
    -65
      examples/network/categories/02_random_nodes.html
  6. +0
    -69
      examples/network/categories/07_selections.html
  7. +0
    -145
      examples/network/categories/11_styling.html
  8. +0
    -69
      examples/network/categories/12_arrows.html
  9. +0
    -69
      examples/network/categories/13_dashed_lines.html
  10. +0
    -111
      examples/network/categories/18_fully_random_nodes_clustering.html
  11. +0
    -138
      examples/network/categories/19_scale_free_graph_clustering.html
  12. +0
    -386
      examples/network/categories/22_les_miserables.html
  13. +0
    -115
      examples/network/categories/26_staticSmoothCurves.html
  14. +0
    -156
      examples/network/categories/27_world_cup_network.html
  15. +0
    -222
      examples/network/categories/29_neighbourhood_highlight.html
  16. +3
    -3
      examples/network/categories/basic_usage.html
  17. +97
    -0
      examples/network/categories/edgeStyles/smoothWorldCup.html
  18. +1
    -1
      examples/network/categories/events/interactionEvents.html
  19. +396
    -0
      examples/network/categories/exampleApplications/les_miserables.html
  20. +504
    -0
      examples/network/categories/exampleApplications/loadingBar.html
  21. +162
    -0
      examples/network/categories/exampleApplications/neighbourhood_highlight.html
  22. +10
    -8
      examples/network/categories/exampleApplications/nodeLegend.html
  23. +5
    -6
      examples/network/categories/exampleApplications/worldCupPerformance.html
  24. +4
    -1
      examples/network/categories/nodeStyles/colors.html
  25. +119
    -0
      examples/network/categories/nodeStyles/shadows.html
  26. +0
    -114
      examples/network/categories/physics/25_physics_configuration.html
  27. +80
    -0
      examples/network/categories/physics/physicsConfiguration.html
  28. +4
    -4
      examples/network/categories/rest/clustering.html
  29. +156
    -0
      examples/network/categories/rest/clusteringByZoom.html
  30. +72
    -0
      examples/network/categories/rest/configuration.html
  31. +91
    -0
      examples/network/categories/rest/performance.html
  32. +0
    -5
      examples/network/data/WorldCup2014.js
  33. +1
    -1
      lib/network/Network.js
  34. +59
    -29
      lib/network/modules/Clustering.js
  35. +1
    -1
      lib/network/modules/EdgesHandler.js
  36. +2
    -2
      lib/network/modules/InteractionHandler.js
  37. +3
    -3
      lib/network/modules/NodesHandler.js
  38. +1
    -1
      lib/network/modules/PhysicsEngine.js
  39. +1
    -1
      lib/network/modules/View.js
  40. +5
    -2
      lib/network/modules/components/Node.js
  41. +13
    -12
      lib/network/options.js
  42. +32
    -19
      lib/shared/Configurator.js

+ 4254
- 4124
dist/vis.js
File diff suppressed because it is too large
View File


+ 8
- 1
docs/network/configure.html View File

@ -100,7 +100,8 @@ var options = {
configure: {
enabled: true,
filter: 'nodes,edges',
container: undefined
container: undefined,
showButton: true
}
}
@ -154,6 +155,12 @@ function (option, path) {
<td><code>undefined</code></td>
<td>This allows you to put the configure list in another HTML container than below the network.</td>
</tr>
<tr>
<td>showButton</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Show the generate options button at the bottom of the configurator.</td>
</tr>
</table>
</div>

+ 31
- 4
docs/network/index.html View File

@ -466,6 +466,33 @@ var locales = {
container with the module name to contain its options.
</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);">
<td colspan="2"><span parent="onEvent" class="right-caret"></span> on(<code>String event name, Function callback</code>)
</td>
</tr>
<tr class="hidden" parent="onEvent">
<td class="midMethods">Returns: none</td>
<td>Set an event listener. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information.
</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);">
<td colspan="2"><span parent="offEvent" class="right-caret"></span> off(<code>String event name, Function callback</code>)
</td>
</tr>
<tr class="hidden" parent="offEvent">
<td class="midMethods">Returns: none</td>
<td>Remove an event listener. The function you supply has to be the exact same as the one you used in the on function. If no function is supplied, all listeners will be removed. Look at the event section of the documentation for more information.
</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);">
<td colspan="2"><span parent="onceEvent" class="right-caret"></span> once(<code>String event name, Function callback</code>)
</td>
</tr>
<tr class="hidden" parent="onceEvent">
<td class="midMethods">Returns: none</td>
<td>Set an event listener only once. After it has taken place, the event listener will be removed. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information.
</td>
</tr>
<tr class="subHeader">
@ -914,11 +941,11 @@ var locales = {
</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);">
<td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> getPosition()</td>
<td colspan="2"><span parent="clusterByHubsize" class="right-caret"></span> getViewPosition()</td>
</tr>
<tr class="hidden" parent="clusterByHubsize">
<td class="midMethods">Returns: Number</td>
<td>Returns the current central focus point of the camera.</td>
<td>Returns the current central focus point of the view.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);">
@ -1255,8 +1282,8 @@ var options = {
</tr>
<tr class="">
<td>zoom</td>
<td><code>{direction:'+'/'-'}</code></td>
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td>
<td><code>{direction:'+'/'-', scale: Number}</code></td>
<td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td>
</tr>
<tr class="">
<td>showPopup</td>

+ 1
- 1
docs/network/physics.html View File

@ -184,7 +184,7 @@ network.setOptions(options);
<tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td>Object | Boolean</td><td><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td>Number</td> <td><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td>Number</td> <td><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td>Number</td> <td><code>50</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td>Boolean</td> <td><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td> <td>Number</td> <td><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>

+ 0
- 65
examples/network/categories/02_random_nodes.html View File

@ -1,65 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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 destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: { stabilization: true }
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
Generate a random network with nodes and edges.
</p>
<p>
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go" onclick="draw()">
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/07_selections.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Selections</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
</p>
<div id="mynetwork"></div>
<pre id="info"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
}
};
network = new vis.Network(container, data, options);
// add event listener
network.on('select', function(properties) {
console.log('select', properties);
delete properties.event;
document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
});
// set initial selection (id's of some nodes)
network.selectNodes([3, 4, 5]);
</script>
</body>
</html>

+ 0
- 145
examples/network/categories/11_styling.html View File

@ -1,145 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Custom style</title>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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 options = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
// create nodes
nodes = [
{id: 1, label: 'black node', group: 'black'},
{id: 2, label: 'black node', group: 'black'},
{id: 3, label: 'black node', group: 'black'},
{id: 4, label: 'red node', group: 'black', color: 'red'},
{id: 5, label: 'gray node', group: 'gray'},
{id: 6, label: 'gray node', group: 'gray'},
{id: 7, label: 'gray node', group: 'gray'},
{id: 8, label: 'gray node', group: 'gray'},
{id: 9, label: 'image node', group: 'white'},
{id: 10, label: 'image node', group: 'white'},
{id: 11, label: 'default node'},
{id: 12, label: 'default node'}
];
// create edges
edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 5, to: 8},
{from: 9, to: 10},
{from: 9, to: 11},
{from: 9, to: 12},
{from: 1, to: 5},
{from: 5, to: 9},
{from: 9, to: 1}
];
// specify options
options = {
physics: {
stabilization: false,
barnesHut: {
springLength:200
}
},
edges: {
width: 2,
arrows: 'to',
color: 'gray'
},
nodes: {
// default for all nodes
font: {
face: 'times'
},
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
},
groups: {
black: {
// defaults for nodes in this group
size: 15,
color: 'black',
font: {
color: 'white',
size: 18,
face: 'courier'
},
shape: 'box'
},
gray: {
color: {
border: 'black',
background: 'gray',
highlight: {
border: 'black',
background: 'lightgray'
}
},
font: {
size: 18,
face: 'arial'
},
shape: 'circle'
},
white: {
color: {
border: 'black',
background: 'white'
},
font: {
color: 'red'
},
shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
}
}
};
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<p>
Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
</p>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/12_arrows.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Arrows</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'arrows\nexamples'},
{id: 2, label: 'none'},
{id: 3, label: '"to"'},
{id: 4, label: '"from, to"'},
{id: 5, label: '"middle"'},
{id: 6, label: '{to: {scaleFactor: 2}}'}
];
var edges = [
{from: 1, to: 2},
{from: 1, to: 3, arrows: 'to'},
{from: 1, to: 4, arrows: 'from, to'},
{from: 1, to: 5, arrows: 'middle'},
{from: 1, to: 6, arrows: {to: {scaleFactor: 2}}}
];
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
This example shows the different options for arrows.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/13_dashed_lines.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Dashed lines</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'},
{id: 3, label: 'dashes: [20, 20]'},
{id: 4, label: 'dashes: [20, 5]'},
{id: 5, label: 'dashes: [5, 20]'},
{id: 6, label: 'dashes: [20, 5, 5, 5]'}
];
var edges = [
{from: 1, to: 2, dashes: true},
{from: 1, to: 3, dashes: [20, 20]},
{from: 1, to: 4, dashes: [20, 5]},
{from: 1, to: 5, dashes: [5, 20]},
{from: 1, to: 6, dashes: [20, 5, 5, 5]}
];
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
This example shows the different options for dashed lines.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 111
examples/network/categories/18_fully_random_nodes_clustering.html View File

@ -1,111 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Fully random nodes clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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 destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
nodes = [];
edges = [];
// randomly create some nodes and edges
var nodeCount = parseInt(document.getElementById('nodeCount').value);
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
}
for (var i = 0; i < nodeCount; i++) {
var from = i;
var to = i;
to = i;
while (to == i) {
to = Math.floor(Math.random() * (nodeCount));
}
edges.push({
from: from,
to: to
});
}
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
clustering: {
enabled: clusteringOn
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="50" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<input type="submit" value="Go">
</form>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 0
- 138
examples/network/categories/19_scale_free_graph_clustering.html View File

@ -1,138 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Scale free network clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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 destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
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-network 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 network
var clusteringOn = document.getElementById('clustering').checked;
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
clustering: {
enabled: clusteringOn,
clusterEdgeThreshold: clusterEdgeThreshold
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="125" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
<input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 0
- 386
examples/network/categories/22_les_miserables.html View File

@ -1,386 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id:0,"label":"Myriel","group":1},
{id:1,"label":"Napoleon","group":1},
{id:2,"label":"Mlle.Baptistine","group":1},
{id:3,"label":"Mme.Magloire","group":1},
{id:4,"label":"CountessdeLo","group":1},
{id:5,"label":"Geborand","group":1},
{id:6,"label":"Champtercier","group":1},
{id:7,"label":"Cravatte","group":1},
{id:8,"label":"Count","group":1},
{id:9,"label":"OldMan","group":1},
{id:10,"label":"Labarre","group":2},
{id:11,"label":"Valjean","group":2},
{id:12,"label":"Marguerite","group":3},
{id:13,"label":"Mme.deR","group":2},
{id:14,"label":"Isabeau","group":2},
{id:15,"label":"Gervais","group":2},
{id:16,"label":"Tholomyes","group":3},
{id:17,"label":"Listolier","group":3},
{id:18,"label":"Fameuil","group":3},
{id:19,"label":"Blacheville","group":3},
{id:20,"label":"Favourite","group":3},
{id:21,"label":"Dahlia","group":3},
{id:22,"label":"Zephine","group":3},
{id:23,"label":"Fantine","group":3},
{id:24,"label":"Mme.Thenardier","group":4},
{id:25,"label":"Thenardier","group":4},
{id:26,"label":"Cosette","group":5},
{id:27,"label":"Javert","group":4},
{id:28,"label":"Fauchelevent","group":0},
{id:29,"label":"Bamatabois","group":2},
{id:30,"label":"Perpetue","group":3},
{id:31,"label":"Simplice","group":2},
{id:32,"label":"Scaufflaire","group":2},
{id:33,"label":"Woman1","group":2},
{id:34,"label":"Judge","group":2},
{id:35,"label":"Champmathieu","group":2},
{id:36,"label":"Brevet","group":2},
{id:37,"label":"Chenildieu","group":2},
{id:38,"label":"Cochepaille","group":2},
{id:39,"label":"Pontmercy","group":4},
{id:40,"label":"Boulatruelle","group":6},
{id:41,"label":"Eponine","group":4},
{id:42,"label":"Anzelma","group":4},
{id:43,"label":"Woman2","group":5},
{id:44,"label":"MotherInnocent","group":0},
{id:45,"label":"Gribier","group":0},
{id:46,"label":"Jondrette","group":7},
{id:47,"label":"Mme.Burgon","group":7},
{id:48,"label":"Gavroche","group":8},
{id:49,"label":"Gillenormand","group":5},
{id:50,"label":"Magnon","group":5},
{id:51,"label":"Mlle.Gillenormand","group":5},
{id:52,"label":"Mme.Pontmercy","group":5},
{id:53,"label":"Mlle.Vaubois","group":5},
{id:54,"label":"Lt.Gillenormand","group":5},
{id:55,"label":"Marius","group":8},
{id:56,"label":"BaronessT","group":5},
{id:57,"label":"Mabeuf","group":8},
{id:58,"label":"Enjolras","group":8},
{id:59,"label":"Combeferre","group":8},
{id:60,"label":"Prouvaire","group":8},
{id:61,"label":"Feuilly","group":8},
{id:62,"label":"Courfeyrac","group":8},
{id:63,"label":"Bahorel","group":8},
{id:64,"label":"Bossuet","group":8},
{id:65,"label":"Joly","group":8},
{id:66,"label":"Grantaire","group":8},
{id:67,"label":"MotherPlutarch","group":9},
{id:68,"label":"Gueulemer","group":4},
{id:69,"label":"Babet","group":4},
{id:70,"label":"Claquesous","group":4},
{id:71,"label":"Montparnasse","group":4},
{id:72,"label":"Toussaint","group":5},
{id:73,"label":"Child1","group":10},
{id:74,"label":"Child2","group":10},
{id:75,"label":"Brujon","group":4},
{id:76,"label":"Mme.Hucheloup","group":8}
];
// create some edges
var edges = [
{"from":1,"to":0},
{"from":2,"to":0},
{"from":3,"to":0},
{"from":3,"to":2},
{"from":4,"to":0},
{"from":5,"to":0},
{"from":6,"to":0},
{"from":7,"to":0},
{"from":8,"to":0},
{"from":9,"to":0},
{"from":11,"to":10},
{"from":11,"to":3},
{"from":11,"to":2},
{"from":11,"to":0},
{"from":12,"to":11},
{"from":13,"to":11},
{"from":14,"to":11},
{"from":15,"to":11},
{"from":17,"to":16},
{"from":18,"to":16},
{"from":18,"to":17},
{"from":19,"to":16},
{"from":19,"to":17},
{"from":19,"to":18},
{"from":20,"to":16},
{"from":20,"to":17},
{"from":20,"to":18},
{"from":20,"to":19},
{"from":21,"to":16},
{"from":21,"to":17},
{"from":21,"to":18},
{"from":21,"to":19},
{"from":21,"to":20},
{"from":22,"to":16},
{"from":22,"to":17},
{"from":22,"to":18},
{"from":22,"to":19},
{"from":22,"to":20},
{"from":22,"to":21},
{"from":23,"to":16},
{"from":23,"to":17},
{"from":23,"to":18},
{"from":23,"to":19},
{"from":23,"to":20},
{"from":23,"to":21},
{"from":23,"to":22},
{"from":23,"to":12},
{"from":23,"to":11},
{"from":24,"to":23},
{"from":24,"to":11},
{"from":25,"to":24},
{"from":25,"to":23},
{"from":25,"to":11},
{"from":26,"to":24},
{"from":26,"to":11},
{"from":26,"to":16},
{"from":26,"to":25},
{"from":27,"to":11},
{"from":27,"to":23},
{"from":27,"to":25},
{"from":27,"to":24},
{"from":27,"to":26},
{"from":28,"to":11},
{"from":28,"to":27},
{"from":29,"to":23},
{"from":29,"to":27},
{"from":29,"to":11},
{"from":30,"to":23},
{"from":31,"to":30},
{"from":31,"to":11},
{"from":31,"to":23},
{"from":31,"to":27},
{"from":32,"to":11},
{"from":33,"to":11},
{"from":33,"to":27},
{"from":34,"to":11},
{"from":34,"to":29},
{"from":35,"to":11},
{"from":35,"to":34},
{"from":35,"to":29},
{"from":36,"to":34},
{"from":36,"to":35},
{"from":36,"to":11},
{"from":36,"to":29},
{"from":37,"to":34},
{"from":37,"to":35},
{"from":37,"to":36},
{"from":37,"to":11},
{"from":37,"to":29},
{"from":38,"to":34},
{"from":38,"to":35},
{"from":38,"to":36},
{"from":38,"to":37},
{"from":38,"to":11},
{"from":38,"to":29},
{"from":39,"to":25},
{"from":40,"to":25},
{"from":41,"to":24},
{"from":41,"to":25},
{"from":42,"to":41},
{"from":42,"to":25},
{"from":42,"to":24},
{"from":43,"to":11},
{"from":43,"to":26},
{"from":43,"to":27},
{"from":44,"to":28},
{"from":44,"to":11},
{"from":45,"to":28},
{"from":47,"to":46},
{"from":48,"to":47},
{"from":48,"to":25},
{"from":48,"to":27},
{"from":48,"to":11},
{"from":49,"to":26},
{"from":49,"to":11},
{"from":50,"to":49},
{"from":50,"to":24},
{"from":51,"to":49},
{"from":51,"to":26},
{"from":51,"to":11},
{"from":52,"to":51},
{"from":52,"to":39},
{"from":53,"to":51},
{"from":54,"to":51},
{"from":54,"to":49},
{"from":54,"to":26},
{"from":55,"to":51},
{"from":55,"to":49},
{"from":55,"to":39},
{"from":55,"to":54},
{"from":55,"to":26},
{"from":55,"to":11},
{"from":55,"to":16},
{"from":55,"to":25},
{"from":55,"to":41},
{"from":55,"to":48},
{"from":56,"to":49},
{"from":56,"to":55},
{"from":57,"to":55},
{"from":57,"to":41},
{"from":57,"to":48},
{"from":58,"to":55},
{"from":58,"to":48},
{"from":58,"to":27},
{"from":58,"to":57},
{"from":58,"to":11},
{"from":59,"to":58},
{"from":59,"to":55},
{"from":59,"to":48},
{"from":59,"to":57},
{"from":60,"to":48},
{"from":60,"to":58},
{"from":60,"to":59},
{"from":61,"to":48},
{"from":61,"to":58},
{"from":61,"to":60},
{"from":61,"to":59},
{"from":61,"to":57},
{"from":61,"to":55},
{"from":62,"to":55},
{"from":62,"to":58},
{"from":62,"to":59},
{"from":62,"to":48},
{"from":62,"to":57},
{"from":62,"to":41},
{"from":62,"to":61},
{"from":62,"to":60},
{"from":63,"to":59},
{"from":63,"to":48},
{"from":63,"to":62},
{"from":63,"to":57},
{"from":63,"to":58},
{"from":63,"to":61},
{"from":63,"to":60},
{"from":63,"to":55},
{"from":64,"to":55},
{"from":64,"to":62},
{"from":64,"to":48},
{"from":64,"to":63},
{"from":64,"to":58},
{"from":64,"to":61},
{"from":64,"to":60},
{"from":64,"to":59},
{"from":64,"to":57},
{"from":64,"to":11},
{"from":65,"to":63},
{"from":65,"to":64},
{"from":65,"to":48},
{"from":65,"to":62},
{"from":65,"to":58},
{"from":65,"to":61},
{"from":65,"to":60},
{"from":65,"to":59},
{"from":65,"to":57},
{"from":65,"to":55},
{"from":66,"to":64},
{"from":66,"to":58},
{"from":66,"to":59},
{"from":66,"to":62},
{"from":66,"to":65},
{"from":66,"to":48},
{"from":66,"to":63},
{"from":66,"to":61},
{"from":66,"to":60},
{"from":67,"to":57},
{"from":68,"to":25},
{"from":68,"to":11},
{"from":68,"to":24},
{"from":68,"to":27},
{"from":68,"to":48},
{"from":68,"to":41},
{"from":69,"to":25},
{"from":69,"to":68},
{"from":69,"to":11},
{"from":69,"to":24},
{"from":69,"to":27},
{"from":69,"to":48},
{"from":69,"to":41},
{"from":70,"to":25},
{"from":70,"to":69},
{"from":70,"to":68},
{"from":70,"to":11},
{"from":70,"to":24},
{"from":70,"to":27},
{"from":70,"to":41},
{"from":70,"to":58},
{"from":71,"to":27},
{"from":71,"to":69},
{"from":71,"to":68},
{"from":71,"to":70},
{"from":71,"to":11},
{"from":71,"to":48},
{"from":71,"to":41},
{"from":71,"to":25},
{"from":72,"to":26},
{"from":72,"to":27},
{"from":72,"to":11},
{"from":73,"to":48},
{"from":74,"to":48},
{"from":74,"to":73},
{"from":75,"to":69},
{"from":75,"to":68},
{"from":75,"to":25},
{"from":75,"to":48},
{"from":75,"to":41},
{"from":75,"to":70},
{"from":75,"to":71},
{"from":76,"to":64},
{"from":76,"to":65},
{"from":76,"to":66},
{"from":76,"to":63},
{"from":76,"to":62},
{"from":76,"to":48},
{"from":76,"to":58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
physics: {
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 115
examples/network/categories/26_staticSmoothCurves.html View File

@ -1,115 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
types. <br /> <br />
Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
that the direction (the from and to) of the curve matters.
<br /> <br />
</div>
<p>
Smooth curve type:
<select id="dropdownID">
<option value="continuous" selected="selected">continuous</option>
<option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option>
<option value="straightCross">straightCross</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option>
</select>
</p>
<p>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
];
// create an array with edges
var edges = [
{from: 1, to: 2, style:"arrow"}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:{
barnesHut: {
gravitationalConstant:0,
springConstant:0,
centralGravity: 0
}
},
edges: {
smooth: {
dynamic: false,
type: '1'
}
}
};
var network = new vis.Network(container, data, options);
function update() {
var type = dropdown.value;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
}
};
network.setOptions(options);
}
update();
</script>
</body>
</html>

+ 0
- 156
examples/network/categories/27_world_cup_network.html View File

@ -1,156 +0,0 @@
<!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>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script src="./data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. <br/>
<br/><br/>
To improve performance, the physics have been disabled with:
<br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0,
springConstant: 0}}</code><br/> and we have enabled
the toggle hideEdgesOnDrag.
<br/><br/>
</div>
Smooth curve type:
<select id="dropdownID">
<option value="continuous">continuous</option>
<option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option>
<option value="straightCross">straightCross</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option>
</select><br/>
inheritColor option:
<select id="inheritColor">
<option value="from">from / true</option>
<option value="to">to</option>
<option value="false">false</option>
</select><br/>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05"
style="width:200px" id="roundnessSlider"> <input
id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0
for the others)
<br/>
Hide edges on drag: <input type="checkbox" checked="checked"
id="hideEdgesOnDrag" /><br/>
Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" />
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
hideEdgesOnDrag.onchange = update;
var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
hideNodesOnDrag.onchange = update;
var inheritColor = document.getElementById("inheritColor");
inheritColor.onchange = redrawAll;
var network;
function redrawAll() {
network = null;
var inheritColorVal = inheritColor.value;
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {
inherit: (inheritColorVal == 'false') ? false : inheritColorVal
},
smooth: {
dynamic: false,
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200
},
rendering: {
hideEdgesOnDrag: true
},
physics: false
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
function update() {
var type = dropdown.value;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
},
rendering: {
hideEdgesOnDrag: hideEdgesOnDrag.checked,
hideNodesOnDrag: hideNodesOnDrag.checked
}
};
network.setOptions(options);
}
redrawAll()
</script>
</body>
</html>

+ 0
- 222
examples/network/categories/29_neighbourhood_highlight.html View File

@ -1,222 +0,0 @@
<!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>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script src="./data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Dynamic Data - Neighbourhood Highlight</h2>
<div style="width:800px; font-size:14px;">
This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..).
<br /><br />
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
function redrawAll() {
nodes.clear();
edges.clear();
network = null;
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 20,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
dynamic: false,
type: 'continuous'
}
},
physics: false,
interaction: {
tooltipDelay: 200
},
rendering: {
hideEdgesOnDrag: true
}
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
network.on("click",onClick);
}
function onClick(selectedItems) {
var nodeId;
var degrees = 2;
// we get all data from the dataset once to avoid updating multiple times.
var allNodes = nodes.get({returnType:"Object"});
if (selectedItems.nodes.length == 0) {
// restore on unselect
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
allNodes[nodeId]['levelOfSeperation'] = undefined;
allNodes[nodeId]['inConnectionList'] = undefined;
}
}
}
else {
// we clear the level of separation in all nodes.
clearLevelOfSeperation(allNodes);
// we will now start to collect all the connected nodes we want to highlight.
var connectedNodes = selectedItems.nodes;
// we can store them into levels of separation and we could then later use this to define a color per level
// any data can be added to a node, this is just stored in the nodeObject.
storeLevelOfSeperation(connectedNodes,0, allNodes);
for (var i = 1; i < degrees + 1; i++) {
appendConnectedNodes(connectedNodes);
storeLevelOfSeperation(connectedNodes, i, allNodes);
}
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
if (allNodes[nodeId]['inConnectionList'] == true) {
if (allNodes[nodeId]['levelOfSeperation'] !== undefined) {
if (allNodes[nodeId]['levelOfSeperation'] >= 2) {
allNodes[nodeId].color = 'rgba(150,150,150,0.75)';
}
else {
allNodes[nodeId].color = undefined;
}
}
else {
allNodes[nodeId].color = undefined;
}
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
}
else {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].oldLabel === undefined) {
allNodes[nodeId].oldLabel = allNodes[nodeId].label;
allNodes[nodeId].label = '';
}
}
}
}
}
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
}
/**
* update the allNodes object with the level of separation.
* Arrays are passed by reference, we do not need to return them because we are working in the same object.
*/
function storeLevelOfSeperation(connectedNodes, level, allNodes) {
for (var i = 0; i < connectedNodes.length; i++) {
var nodeId = connectedNodes[i];
if (allNodes[nodeId]['levelOfSeperation'] === undefined) {
allNodes[nodeId]['levelOfSeperation'] = level;
}
allNodes[nodeId]['inConnectionList'] = true;
}
}
function clearLevelOfSeperation(allNodes) {
for (var nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
allNodes[nodeId]['levelOfSeperation'] = undefined;
allNodes[nodeId]['inConnectionList'] = undefined;
}
}
}
/**
* Add the connected nodes to the list of nodes we already have
*
*
*/
function appendConnectedNodes(sourceNodes) {
var tempSourceNodes = [];
// first we make a copy of the nodes so we do not extend the array we loop over.
for (var i = 0; i < sourceNodes.length; i++) {
tempSourceNodes.push(sourceNodes[i])
}
for (var i = 0; i < tempSourceNodes.length; i++) {
var nodeId = tempSourceNodes[i];
if (sourceNodes.indexOf(nodeId) == -1) {
sourceNodes.push(nodeId);
}
var connectedNodes = network.getConnectedNodes(nodeId);
addUnique(connectedNodes,sourceNodes);
}
tempSourceNodes = null;
}
/**
* Join two arrays without duplicates
* @param fromArray
* @param toArray
*/
function addUnique(fromArray, toArray) {
for (var i = 0; i < fromArray.length; i++) {
if (toArray.indexOf(fromArray[i]) == -1) {
toArray.push(fromArray[i]);
}
}
}
redrawAll()
</script>
</body></html>

examples/network/categories/01_basic_usage.html → examples/network/categories/basic_usage.html View File

@ -3,8 +3,8 @@
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
@ -50,6 +50,6 @@
var network = new vis.Network(container, data, options);
</script>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</body>
</html>

+ 97
- 0
examples/network/categories/edgeStyles/smoothWorldCup.html View File

@ -0,0 +1,97 @@
<!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>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
<script src="../../data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height:280px;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
</div>
<div id="optionsContainer"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
color:{inherit:true},
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
hideEdgesOnDrag: true,
tooltipDelay: 200
},
configure: {
filter: function (option, path) {
if (option === 'inherit') {return true;}
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
if (option === 'roundness') {return true;}
if (option === 'hideEdgesOnDrag') {return true;}
if (option === 'hideNodesOnDrag') {return true;}
return false;
},
container: document.getElementById('optionsContainer'),
showButton: false
},
physics: false
};
var data = {nodes:nodes, edges:edges};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
redrawAll()
</script>
</body>
</html>

examples/network/categories/events/clickEvents.html → examples/network/categories/events/interactionEvents.html View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<title>Network | Interaction events</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>

+ 396
- 0
examples/network/categories/exampleApplications/les_miserables.html View File

@ -0,0 +1,396 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 0, "label": "Myriel", "group": 1},
{id: 1, "label": "Napoleon", "group": 1},
{id: 2, "label": "Mlle.Baptistine", "group": 1},
{id: 3, "label": "Mme.Magloire", "group": 1},
{id: 4, "label": "CountessdeLo", "group": 1},
{id: 5, "label": "Geborand", "group": 1},
{id: 6, "label": "Champtercier", "group": 1},
{id: 7, "label": "Cravatte", "group": 1},
{id: 8, "label": "Count", "group": 1},
{id: 9, "label": "OldMan", "group": 1},
{id: 10, "label": "Labarre", "group": 2},
{id: 11, "label": "Valjean", "group": 2},
{id: 12, "label": "Marguerite", "group": 3},
{id: 13, "label": "Mme.deR", "group": 2},
{id: 14, "label": "Isabeau", "group": 2},
{id: 15, "label": "Gervais", "group": 2},
{id: 16, "label": "Tholomyes", "group": 3},
{id: 17, "label": "Listolier", "group": 3},
{id: 18, "label": "Fameuil", "group": 3},
{id: 19, "label": "Blacheville", "group": 3},
{id: 20, "label": "Favourite", "group": 3},
{id: 21, "label": "Dahlia", "group": 3},
{id: 22, "label": "Zephine", "group": 3},
{id: 23, "label": "Fantine", "group": 3},
{id: 24, "label": "Mme.Thenardier", "group": 4},
{id: 25, "label": "Thenardier", "group": 4},
{id: 26, "label": "Cosette", "group": 5},
{id: 27, "label": "Javert", "group": 4},
{id: 28, "label": "Fauchelevent", "group": 0},
{id: 29, "label": "Bamatabois", "group": 2},
{id: 30, "label": "Perpetue", "group": 3},
{id: 31, "label": "Simplice", "group": 2},
{id: 32, "label": "Scaufflaire", "group": 2},
{id: 33, "label": "Woman1", "group": 2},
{id: 34, "label": "Judge", "group": 2},
{id: 35, "label": "Champmathieu", "group": 2},
{id: 36, "label": "Brevet", "group": 2},
{id: 37, "label": "Chenildieu", "group": 2},
{id: 38, "label": "Cochepaille", "group": 2},
{id: 39, "label": "Pontmercy", "group": 4},
{id: 40, "label": "Boulatruelle", "group": 6},
{id: 41, "label": "Eponine", "group": 4},
{id: 42, "label": "Anzelma", "group": 4},
{id: 43, "label": "Woman2", "group": 5},
{id: 44, "label": "MotherInnocent", "group": 0},
{id: 45, "label": "Gribier", "group": 0},
{id: 46, "label": "Jondrette", "group": 7},
{id: 47, "label": "Mme.Burgon", "group": 7},
{id: 48, "label": "Gavroche", "group": 8},
{id: 49, "label": "Gillenormand", "group": 5},
{id: 50, "label": "Magnon", "group": 5},
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
{id: 52, "label": "Mme.Pontmercy", "group": 5},
{id: 53, "label": "Mlle.Vaubois", "group": 5},
{id: 54, "label": "Lt.Gillenormand", "group": 5},
{id: 55, "label": "Marius", "group": 8},
{id: 56, "label": "BaronessT", "group": 5},
{id: 57, "label": "Mabeuf", "group": 8},
{id: 58, "label": "Enjolras", "group": 8},
{id: 59, "label": "Combeferre", "group": 8},
{id: 60, "label": "Prouvaire", "group": 8},
{id: 61, "label": "Feuilly", "group": 8},
{id: 62, "label": "Courfeyrac", "group": 8},
{id: 63, "label": "Bahorel", "group": 8},
{id: 64, "label": "Bossuet", "group": 8},
{id: 65, "label": "Joly", "group": 8},
{id: 66, "label": "Grantaire", "group": 8},
{id: 67, "label": "MotherPlutarch", "group": 9},
{id: 68, "label": "Gueulemer", "group": 4},
{id: 69, "label": "Babet", "group": 4},
{id: 70, "label": "Claquesous", "group": 4},
{id: 71, "label": "Montparnasse", "group": 4},
{id: 72, "label": "Toussaint", "group": 5},
{id: 73, "label": "Child1", "group": 10},
{id: 74, "label": "Child2", "group": 10},
{id: 75, "label": "Brujon", "group": 4},
{id: 76, "label": "Mme.Hucheloup", "group": 8}
];
// create some edges
var edges = [
{"from": 1, "to": 0},
{"from": 2, "to": 0},
{"from": 3, "to": 0},
{"from": 3, "to": 2},
{"from": 4, "to": 0},
{"from": 5, "to": 0},
{"from": 6, "to": 0},
{"from": 7, "to": 0},
{"from": 8, "to": 0},
{"from": 9, "to": 0},
{"from": 11, "to": 10},
{"from": 11, "to": 3},
{"from": 11, "to": 2},
{"from": 11, "to": 0},
{"from": 12, "to": 11},
{"from": 13, "to": 11},
{"from": 14, "to": 11},
{"from": 15, "to": 11},
{"from": 17, "to": 16},
{"from": 18, "to": 16},
{"from": 18, "to": 17},
{"from": 19, "to": 16},
{"from": 19, "to": 17},
{"from": 19, "to": 18},
{"from": 20, "to": 16},
{"from": 20, "to": 17},
{"from": 20, "to": 18},
{"from": 20, "to": 19},
{"from": 21, "to": 16},
{"from": 21, "to": 17},
{"from": 21, "to": 18},
{"from": 21, "to": 19},
{"from": 21, "to": 20},
{"from": 22, "to": 16},
{"from": 22, "to": 17},
{"from": 22, "to": 18},
{"from": 22, "to": 19},
{"from": 22, "to": 20},
{"from": 22, "to": 21},
{"from": 23, "to": 16},
{"from": 23, "to": 17},
{"from": 23, "to": 18},
{"from": 23, "to": 19},
{"from": 23, "to": 20},
{"from": 23, "to": 21},
{"from": 23, "to": 22},
{"from": 23, "to": 12},
{"from": 23, "to": 11},
{"from": 24, "to": 23},
{"from": 24, "to": 11},
{"from": 25, "to": 24},
{"from": 25, "to": 23},
{"from": 25, "to": 11},
{"from": 26, "to": 24},
{"from": 26, "to": 11},
{"from": 26, "to": 16},
{"from": 26, "to": 25},
{"from": 27, "to": 11},
{"from": 27, "to": 23},
{"from": 27, "to": 25},
{"from": 27, "to": 24},
{"from": 27, "to": 26},
{"from": 28, "to": 11},
{"from": 28, "to": 27},
{"from": 29, "to": 23},
{"from": 29, "to": 27},
{"from": 29, "to": 11},
{"from": 30, "to": 23},
{"from": 31, "to": 30},
{"from": 31, "to": 11},
{"from": 31, "to": 23},
{"from": 31, "to": 27},
{"from": 32, "to": 11},
{"from": 33, "to": 11},
{"from": 33, "to": 27},
{"from": 34, "to": 11},
{"from": 34, "to": 29},
{"from": 35, "to": 11},
{"from": 35, "to": 34},
{"from": 35, "to": 29},
{"from": 36, "to": 34},
{"from": 36, "to": 35},
{"from": 36, "to": 11},
{"from": 36, "to": 29},
{"from": 37, "to": 34},
{"from": 37, "to": 35},
{"from": 37, "to": 36},
{"from": 37, "to": 11},
{"from": 37, "to": 29},
{"from": 38, "to": 34},
{"from": 38, "to": 35},
{"from": 38, "to": 36},
{"from": 38, "to": 37},
{"from": 38, "to": 11},
{"from": 38, "to": 29},
{"from": 39, "to": 25},
{"from": 40, "to": 25},
{"from": 41, "to": 24},
{"from": 41, "to": 25},
{"from": 42, "to": 41},
{"from": 42, "to": 25},
{"from": 42, "to": 24},
{"from": 43, "to": 11},
{"from": 43, "to": 26},
{"from": 43, "to": 27},
{"from": 44, "to": 28},
{"from": 44, "to": 11},
{"from": 45, "to": 28},
{"from": 47, "to": 46},
{"from": 48, "to": 47},
{"from": 48, "to": 25},
{"from": 48, "to": 27},
{"from": 48, "to": 11},
{"from": 49, "to": 26},
{"from": 49, "to": 11},
{"from": 50, "to": 49},
{"from": 50, "to": 24},
{"from": 51, "to": 49},
{"from": 51, "to": 26},
{"from": 51, "to": 11},
{"from": 52, "to": 51},
{"from": 52, "to": 39},
{"from": 53, "to": 51},
{"from": 54, "to": 51},
{"from": 54, "to": 49},
{"from": 54, "to": 26},
{"from": 55, "to": 51},
{"from": 55, "to": 49},
{"from": 55, "to": 39},
{"from": 55, "to": 54},
{"from": 55, "to": 26},
{"from": 55, "to": 11},
{"from": 55, "to": 16},
{"from": 55, "to": 25},
{"from": 55, "to": 41},
{"from": 55, "to": 48},
{"from": 56, "to": 49},
{"from": 56, "to": 55},
{"from": 57, "to": 55},
{"from": 57, "to": 41},
{"from": 57, "to": 48},
{"from": 58, "to": 55},
{"from": 58, "to": 48},
{"from": 58, "to": 27},
{"from": 58, "to": 57},
{"from": 58, "to": 11},
{"from": 59, "to": 58},
{"from": 59, "to": 55},
{"from": 59, "to": 48},
{"from": 59, "to": 57},
{"from": 60, "to": 48},
{"from": 60, "to": 58},
{"from": 60, "to": 59},
{"from": 61, "to": 48},
{"from": 61, "to": 58},
{"from": 61, "to": 60},
{"from": 61, "to": 59},
{"from": 61, "to": 57},
{"from": 61, "to": 55},
{"from": 62, "to": 55},
{"from": 62, "to": 58},
{"from": 62, "to": 59},
{"from": 62, "to": 48},
{"from": 62, "to": 57},
{"from": 62, "to": 41},
{"from": 62, "to": 61},
{"from": 62, "to": 60},
{"from": 63, "to": 59},
{"from": 63, "to": 48},
{"from": 63, "to": 62},
{"from": 63, "to": 57},
{"from": 63, "to": 58},
{"from": 63, "to": 61},
{"from": 63, "to": 60},
{"from": 63, "to": 55},
{"from": 64, "to": 55},
{"from": 64, "to": 62},
{"from": 64, "to": 48},
{"from": 64, "to": 63},
{"from": 64, "to": 58},
{"from": 64, "to": 61},
{"from": 64, "to": 60},
{"from": 64, "to": 59},
{"from": 64, "to": 57},
{"from": 64, "to": 11},
{"from": 65, "to": 63},
{"from": 65, "to": 64},
{"from": 65, "to": 48},
{"from": 65, "to": 62},
{"from": 65, "to": 58},
{"from": 65, "to": 61},
{"from": 65, "to": 60},
{"from": 65, "to": 59},
{"from": 65, "to": 57},
{"from": 65, "to": 55},
{"from": 66, "to": 64},
{"from": 66, "to": 58},
{"from": 66, "to": 59},
{"from": 66, "to": 62},
{"from": 66, "to": 65},
{"from": 66, "to": 48},
{"from": 66, "to": 63},
{"from": 66, "to": 61},
{"from": 66, "to": 60},
{"from": 67, "to": 57},
{"from": 68, "to": 25},
{"from": 68, "to": 11},
{"from": 68, "to": 24},
{"from": 68, "to": 27},
{"from": 68, "to": 48},
{"from": 68, "to": 41},
{"from": 69, "to": 25},
{"from": 69, "to": 68},
{"from": 69, "to": 11},
{"from": 69, "to": 24},
{"from": 69, "to": 27},
{"from": 69, "to": 48},
{"from": 69, "to": 41},
{"from": 70, "to": 25},
{"from": 70, "to": 69},
{"from": 70, "to": 68},
{"from": 70, "to": 11},
{"from": 70, "to": 24},
{"from": 70, "to": 27},
{"from": 70, "to": 41},
{"from": 70, "to": 58},
{"from": 71, "to": 27},
{"from": 71, "to": 69},
{"from": 71, "to": 68},
{"from": 71, "to": 70},
{"from": 71, "to": 11},
{"from": 71, "to": 48},
{"from": 71, "to": 41},
{"from": 71, "to": 25},
{"from": 72, "to": 26},
{"from": 72, "to": 27},
{"from": 72, "to": 11},
{"from": 73, "to": 48},
{"from": 74, "to": 48},
{"from": 74, "to": 73},
{"from": 75, "to": 69},
{"from": 75, "to": 68},
{"from": 75, "to": 25},
{"from": 75, "to": 48},
{"from": 75, "to": 41},
{"from": 75, "to": 70},
{"from": 75, "to": 71},
{"from": 76, "to": 64},
{"from": 76, "to": 65},
{"from": 76, "to": 66},
{"from": 76, "to": 63},
{"from": 76, "to": 62},
{"from": 76, "to": 48},
{"from": 76, "to": 58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {iterations:300}
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 504
- 0
examples/network/categories/exampleApplications/loadingBar.html View File

@ -0,0 +1,504 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
#loadingBar {
position:absolute;
top:0px;
left:0px;
width: 902px;
height: 902px;
background-color:rgba(200,200,200,0.8);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity:1;
}
#wrapper {
position:relative;
width:900px;
height:900px;
}
#text {
position:absolute;
top:8px;
left:530px;
width:30px;
height:50px;
margin:auto auto auto auto;
font-size:22px;
color: #000000;
}
div.outerBorder {
position:relative;
top:400px;
width:600px;
height:44px;
margin:auto auto auto auto;
border:8px solid rgba(0,0,0,0.1);
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
border-radius:72px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:23px;
margin:auto auto auto auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:10px;
}
#bar {
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
margin:auto auto auto auto;
border-radius:11px;
border:2px solid rgba(30,30,30,0.05);
background: rgb(0, 173, 246); /* Old browsers */
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 0, "label": "Myriel", "group": 1},
{id: 1, "label": "Napoleon", "group": 1},
{id: 2, "label": "Mlle.Baptistine", "group": 1},
{id: 3, "label": "Mme.Magloire", "group": 1},
{id: 4, "label": "CountessdeLo", "group": 1},
{id: 5, "label": "Geborand", "group": 1},
{id: 6, "label": "Champtercier", "group": 1},
{id: 7, "label": "Cravatte", "group": 1},
{id: 8, "label": "Count", "group": 1},
{id: 9, "label": "OldMan", "group": 1},
{id: 10, "label": "Labarre", "group": 2},
{id: 11, "label": "Valjean", "group": 2},
{id: 12, "label": "Marguerite", "group": 3},
{id: 13, "label": "Mme.deR", "group": 2},
{id: 14, "label": "Isabeau", "group": 2},
{id: 15, "label": "Gervais", "group": 2},
{id: 16, "label": "Tholomyes", "group": 3},
{id: 17, "label": "Listolier", "group": 3},
{id: 18, "label": "Fameuil", "group": 3},
{id: 19, "label": "Blacheville", "group": 3},
{id: 20, "label": "Favourite", "group": 3},
{id: 21, "label": "Dahlia", "group": 3},
{id: 22, "label": "Zephine", "group": 3},
{id: 23, "label": "Fantine", "group": 3},
{id: 24, "label": "Mme.Thenardier", "group": 4},
{id: 25, "label": "Thenardier", "group": 4},
{id: 26, "label": "Cosette", "group": 5},
{id: 27, "label": "Javert", "group": 4},
{id: 28, "label": "Fauchelevent", "group": 0},
{id: 29, "label": "Bamatabois", "group": 2},
{id: 30, "label": "Perpetue", "group": 3},
{id: 31, "label": "Simplice", "group": 2},
{id: 32, "label": "Scaufflaire", "group": 2},
{id: 33, "label": "Woman1", "group": 2},
{id: 34, "label": "Judge", "group": 2},
{id: 35, "label": "Champmathieu", "group": 2},
{id: 36, "label": "Brevet", "group": 2},
{id: 37, "label": "Chenildieu", "group": 2},
{id: 38, "label": "Cochepaille", "group": 2},
{id: 39, "label": "Pontmercy", "group": 4},
{id: 40, "label": "Boulatruelle", "group": 6},
{id: 41, "label": "Eponine", "group": 4},
{id: 42, "label": "Anzelma", "group": 4},
{id: 43, "label": "Woman2", "group": 5},
{id: 44, "label": "MotherInnocent", "group": 0},
{id: 45, "label": "Gribier", "group": 0},
{id: 46, "label": "Jondrette", "group": 7},
{id: 47, "label": "Mme.Burgon", "group": 7},
{id: 48, "label": "Gavroche", "group": 8},
{id: 49, "label": "Gillenormand", "group": 5},
{id: 50, "label": "Magnon", "group": 5},
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
{id: 52, "label": "Mme.Pontmercy", "group": 5},
{id: 53, "label": "Mlle.Vaubois", "group": 5},
{id: 54, "label": "Lt.Gillenormand", "group": 5},
{id: 55, "label": "Marius", "group": 8},
{id: 56, "label": "BaronessT", "group": 5},
{id: 57, "label": "Mabeuf", "group": 8},
{id: 58, "label": "Enjolras", "group": 8},
{id: 59, "label": "Combeferre", "group": 8},
{id: 60, "label": "Prouvaire", "group": 8},
{id: 61, "label": "Feuilly", "group": 8},
{id: 62, "label": "Courfeyrac", "group": 8},
{id: 63, "label": "Bahorel", "group": 8},
{id: 64, "label": "Bossuet", "group": 8},
{id: 65, "label": "Joly", "group": 8},
{id: 66, "label": "Grantaire", "group": 8},
{id: 67, "label": "MotherPlutarch", "group": 9},
{id: 68, "label": "Gueulemer", "group": 4},
{id: 69, "label": "Babet", "group": 4},
{id: 70, "label": "Claquesous", "group": 4},
{id: 71, "label": "Montparnasse", "group": 4},
{id: 72, "label": "Toussaint", "group": 5},
{id: 73, "label": "Child1", "group": 10},
{id: 74, "label": "Child2", "group": 10},
{id: 75, "label": "Brujon", "group": 4},
{id: 76, "label": "Mme.Hucheloup", "group": 8}
];
// create some edges
var edges = [
{"from": 1, "to": 0},
{"from": 2, "to": 0},
{"from": 3, "to": 0},
{"from": 3, "to": 2},
{"from": 4, "to": 0},
{"from": 5, "to": 0},
{"from": 6, "to": 0},
{"from": 7, "to": 0},
{"from": 8, "to": 0},
{"from": 9, "to": 0},
{"from": 11, "to": 10},
{"from": 11, "to": 3},
{"from": 11, "to": 2},
{"from": 11, "to": 0},
{"from": 12, "to": 11},
{"from": 13, "to": 11},
{"from": 14, "to": 11},
{"from": 15, "to": 11},
{"from": 17, "to": 16},
{"from": 18, "to": 16},
{"from": 18, "to": 17},
{"from": 19, "to": 16},
{"from": 19, "to": 17},
{"from": 19, "to": 18},
{"from": 20, "to": 16},
{"from": 20, "to": 17},
{"from": 20, "to": 18},
{"from": 20, "to": 19},
{"from": 21, "to": 16},
{"from": 21, "to": 17},
{"from": 21, "to": 18},
{"from": 21, "to": 19},
{"from": 21, "to": 20},
{"from": 22, "to": 16},
{"from": 22, "to": 17},
{"from": 22, "to": 18},
{"from": 22, "to": 19},
{"from": 22, "to": 20},
{"from": 22, "to": 21},
{"from": 23, "to": 16},
{"from": 23, "to": 17},
{"from": 23, "to": 18},
{"from": 23, "to": 19},
{"from": 23, "to": 20},
{"from": 23, "to": 21},
{"from": 23, "to": 22},
{"from": 23, "to": 12},
{"from": 23, "to": 11},
{"from": 24, "to": 23},
{"from": 24, "to": 11},
{"from": 25, "to": 24},
{"from": 25, "to": 23},
{"from": 25, "to": 11},
{"from": 26, "to": 24},
{"from": 26, "to": 11},
{"from": 26, "to": 16},
{"from": 26, "to": 25},
{"from": 27, "to": 11},
{"from": 27, "to": 23},
{"from": 27, "to": 25},
{"from": 27, "to": 24},
{"from": 27, "to": 26},
{"from": 28, "to": 11},
{"from": 28, "to": 27},
{"from": 29, "to": 23},
{"from": 29, "to": 27},
{"from": 29, "to": 11},
{"from": 30, "to": 23},
{"from": 31, "to": 30},
{"from": 31, "to": 11},
{"from": 31, "to": 23},
{"from": 31, "to": 27},
{"from": 32, "to": 11},
{"from": 33, "to": 11},
{"from": 33, "to": 27},
{"from": 34, "to": 11},
{"from": 34, "to": 29},
{"from": 35, "to": 11},
{"from": 35, "to": 34},
{"from": 35, "to": 29},
{"from": 36, "to": 34},
{"from": 36, "to": 35},
{"from": 36, "to": 11},
{"from": 36, "to": 29},
{"from": 37, "to": 34},
{"from": 37, "to": 35},
{"from": 37, "to": 36},
{"from": 37, "to": 11},
{"from": 37, "to": 29},
{"from": 38, "to": 34},
{"from": 38, "to": 35},
{"from": 38, "to": 36},
{"from": 38, "to": 37},
{"from": 38, "to": 11},
{"from": 38, "to": 29},
{"from": 39, "to": 25},
{"from": 40, "to": 25},
{"from": 41, "to": 24},
{"from": 41, "to": 25},
{"from": 42, "to": 41},
{"from": 42, "to": 25},
{"from": 42, "to": 24},
{"from": 43, "to": 11},
{"from": 43, "to": 26},
{"from": 43, "to": 27},
{"from": 44, "to": 28},
{"from": 44, "to": 11},
{"from": 45, "to": 28},
{"from": 47, "to": 46},
{"from": 48, "to": 47},
{"from": 48, "to": 25},
{"from": 48, "to": 27},
{"from": 48, "to": 11},
{"from": 49, "to": 26},
{"from": 49, "to": 11},
{"from": 50, "to": 49},
{"from": 50, "to": 24},
{"from": 51, "to": 49},
{"from": 51, "to": 26},
{"from": 51, "to": 11},
{"from": 52, "to": 51},
{"from": 52, "to": 39},
{"from": 53, "to": 51},
{"from": 54, "to": 51},
{"from": 54, "to": 49},
{"from": 54, "to": 26},
{"from": 55, "to": 51},
{"from": 55, "to": 49},
{"from": 55, "to": 39},
{"from": 55, "to": 54},
{"from": 55, "to": 26},
{"from": 55, "to": 11},
{"from": 55, "to": 16},
{"from": 55, "to": 25},
{"from": 55, "to": 41},
{"from": 55, "to": 48},
{"from": 56, "to": 49},
{"from": 56, "to": 55},
{"from": 57, "to": 55},
{"from": 57, "to": 41},
{"from": 57, "to": 48},
{"from": 58, "to": 55},
{"from": 58, "to": 48},
{"from": 58, "to": 27},
{"from": 58, "to": 57},
{"from": 58, "to": 11},
{"from": 59, "to": 58},
{"from": 59, "to": 55},
{"from": 59, "to": 48},
{"from": 59, "to": 57},
{"from": 60, "to": 48},
{"from": 60, "to": 58},
{"from": 60, "to": 59},
{"from": 61, "to": 48},
{"from": 61, "to": 58},
{"from": 61, "to": 60},
{"from": 61, "to": 59},
{"from": 61, "to": 57},
{"from": 61, "to": 55},
{"from": 62, "to": 55},
{"from": 62, "to": 58},
{"from": 62, "to": 59},
{"from": 62, "to": 48},
{"from": 62, "to": 57},
{"from": 62, "to": 41},
{"from": 62, "to": 61},
{"from": 62, "to": 60},
{"from": 63, "to": 59},
{"from": 63, "to": 48},
{"from": 63, "to": 62},
{"from": 63, "to": 57},
{"from": 63, "to": 58},
{"from": 63, "to": 61},
{"from": 63, "to": 60},
{"from": 63, "to": 55},
{"from": 64, "to": 55},
{"from": 64, "to": 62},
{"from": 64, "to": 48},
{"from": 64, "to": 63},
{"from": 64, "to": 58},
{"from": 64, "to": 61},
{"from": 64, "to": 60},
{"from": 64, "to": 59},
{"from": 64, "to": 57},
{"from": 64, "to": 11},
{"from": 65, "to": 63},
{"from": 65, "to": 64},
{"from": 65, "to": 48},
{"from": 65, "to": 62},
{"from": 65, "to": 58},
{"from": 65, "to": 61},
{"from": 65, "to": 60},
{"from": 65, "to": 59},
{"from": 65, "to": 57},
{"from": 65, "to": 55},
{"from": 66, "to": 64},
{"from": 66, "to": 58},
{"from": 66, "to": 59},
{"from": 66, "to": 62},
{"from": 66, "to": 65},
{"from": 66, "to": 48},
{"from": 66, "to": 63},
{"from": 66, "to": 61},
{"from": 66, "to": 60},
{"from": 67, "to": 57},
{"from": 68, "to": 25},
{"from": 68, "to": 11},
{"from": 68, "to": 24},
{"from": 68, "to": 27},
{"from": 68, "to": 48},
{"from": 68, "to": 41},
{"from": 69, "to": 25},
{"from": 69, "to": 68},
{"from": 69, "to": 11},
{"from": 69, "to": 24},
{"from": 69, "to": 27},
{"from": 69, "to": 48},
{"from": 69, "to": 41},
{"from": 70, "to": 25},
{"from": 70, "to": 69},
{"from": 70, "to": 68},
{"from": 70, "to": 11},
{"from": 70, "to": 24},
{"from": 70, "to": 27},
{"from": 70, "to": 41},
{"from": 70, "to": 58},
{"from": 71, "to": 27},
{"from": 71, "to": 69},
{"from": 71, "to": 68},
{"from": 71, "to": 70},
{"from": 71, "to": 11},
{"from": 71, "to": 48},
{"from": 71, "to": 41},
{"from": 71, "to": 25},
{"from": 72, "to": 26},
{"from": 72, "to": 27},
{"from": 72, "to": 11},
{"from": 73, "to": 48},
{"from": 74, "to": 48},
{"from": 74, "to": 73},
{"from": 75, "to": 69},
{"from": 75, "to": 68},
{"from": 75, "to": 25},
{"from": 75, "to": 48},
{"from": 75, "to": 41},
{"from": 75, "to": 70},
{"from": 75, "to": 71},
{"from": 76, "to": 64},
{"from": 76, "to": 65},
{"from": 76, "to": 66},
{"from": 76, "to": 63},
{"from": 76, "to": 62},
{"from": 76, "to": 48},
{"from": 76, "to": 58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
layout:{
randomSeed:34
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled:true,
iterations:2000,
updateInterval:25
}
}
};
var network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
With the new stabilization events you can implement your own custom loading bar for all those long loading times!
</p>
<div id="wrapper">
<div id="mynetwork"></div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
</body>
</html>

+ 162
- 0
examples/network/categories/exampleApplications/neighbourhood_highlight.html View File

@ -0,0 +1,162 @@
<!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>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
<script src="../../data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<h2>Dynamic Data - Neighbourhood Highlight</h2>
<div style="width:800px; font-size:14px;">
This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
<br /><br />
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
var allNodes;
var highlightActive = false;
var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: false,
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
// get a JSON object
allNodes = nodesDataset.get({returnType:"Object"});
network.on("click",neighbourhoodHighlight);
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i,j;
var selectedNode = params.nodes[0];
var degrees = 2;
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var allConnectedNodes = [];
// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
}
}
// all second degree nodes get a different color and their label back
for (i = 0; i < allConnectedNodes.length; i++) {
allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// the main node gets its own color and its label back.
allNodes[selectedNode].color = undefined;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
}
else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
highlightActive = false
}
// transform the object into an array
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodesDataset.update(updateArray);
}
redrawAll()
</script>
</body></html>

examples/network/categories/17_network_info.html → examples/network/categories/exampleApplications/nodeLegend.html View File

@ -18,8 +18,8 @@
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<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;
@ -115,13 +115,15 @@
scaling: {
min: 16,
max: 32
},
font: {
color: BLACK
}
},
edges: {
color: GRAY
color: GRAY,
smooth: false
},
physics:{
barnesHut:{gravitationalConstant:-30000},
stabilization: {iterations:2500}
},
groups: {
'switch': {
@ -149,12 +151,12 @@
network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
<div id="mynetwork"></div>

examples/network/categories/28_world_cup_network_performance.html → examples/network/categories/exampleApplications/worldCupPerformance.html View File

@ -5,10 +5,10 @@
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Network | Static smooth curves - World Cup Network</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
<script src="../data/WorldCup2014.js"></script>
<script src="../../data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
@ -17,7 +17,7 @@
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</head>
<body>
@ -43,8 +43,7 @@
function redrawAll() {
network = null;
// remove positoins
for (var i = 0; i < nodes.length; i++) {
delete nodes[i].x;
delete nodes[i].y;

+ 4
- 1
examples/network/categories/nodeStyles/colors.html View File

@ -55,7 +55,10 @@
nodes: nodes,
edges: edges
};
var options = {nodes:{borderWidth:2},interaction:{hover:true}};
var options = {
nodes: {borderWidth: 2},
interaction: {hover: true}
}
var network = new vis.Network(container, data, options);
</script>

+ 119
- 0
examples/network/categories/nodeStyles/shadows.html View File

@ -0,0 +1,119 @@
<!doctype html>
<html>
<head>
<title>Network | Groups</title>
<style>
body {
color: #d3d3d3;
font: 12pt arial;
background-color: #ffffff;
}
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid #444444;
background-color: #dddddd;
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
var len = undefined;
var nodes = [{id: 0, label: "0", group: 0},
{id: 1, label: "1", group: 0},
{id: 2, label: "2", group: 0},
{id: 3, label: "3", group: 1},
{id: 4, label: "4", group: 1},
{id: 5, label: "5", group: 1},
{id: 6, label: "6", group: 2},
{id: 7, label: "7", group: 2},
{id: 8, label: "8", group: 2},
{id: 9, label: "9", group: 3},
{id: 10, label: "10", group: 3},
{id: 11, label: "11", group: 3},
{id: 12, label: "12", group: 4},
{id: 13, label: "13", group: 4},
{id: 14, label: "14", group: 4},
{id: 15, label: "15", group: 5},
{id: 16, label: "16", group: 5},
{id: 17, label: "17", group: 5},
{id: 18, label: "18", group: 6},
{id: 19, label: "19", group: 6},
{id: 20, label: "20", group: 6},
{id: 21, label: "21", group: 7},
{id: 22, label: "22", group: 7},
{id: 23, label: "23", group: 7},
{id: 24, label: "24", group: 8},
{id: 25, label: "25", group: 8},
{id: 26, label: "26", group: 8},
{id: 27, label: "27", group: 9},
{id: 28, label: "28", group: 9},
{id: 29, label: "29", group: 9}
];
var edges = [{from: 1, to: 0},
{from: 2, to: 0},
{from: 4, to: 3},
{from: 5, to: 4},
{from: 4, to: 0},
{from: 7, to: 6},
{from: 8, to: 7},
{from: 7, to: 0},
{from: 10, to: 9},
{from: 11, to: 10},
{from: 10, to: 4},
{from: 13, to: 12},
{from: 14, to: 13},
{from: 13, to: 0},
{from: 16, to: 15},
{from: 17, to: 15},
{from: 15, to: 10},
{from: 19, to: 18},
{from: 20, to: 19},
{from: 19, to: 4},
{from: 22, to: 21},
{from: 23, to: 22},
{from: 22, to: 13},
{from: 25, to: 24},
{from: 26, to: 25},
{from: 25, to: 7},
{from: 28, to: 27},
{from: 29, to: 28},
{from: 28, to: 0}
]
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 30,
font: {
size: 32
},
borderWidth: 2,
shadow:true
},
edges: {
width: 2,
shadow:true
}
};
network = new vis.Network(container, data, options);
</script>
</body>
</html>

+ 0
- 114
examples/network/categories/physics/25_physics_configuration.html View File

@ -1,114 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Playing with Physics</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<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 = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 60;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network 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 network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {
stabilization: false
},
configure: {
filter: 'physics'
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</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, network 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 network 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 />
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 80
- 0
examples/network/categories/physics/physicsConfiguration.html View File

@ -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>

+ 4
- 4
examples/network/categories/rest/clustering.html View File

@ -42,12 +42,12 @@ Click any of the buttons below to cluster the network. On every push the network
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', color:'orange'},
{id: 2, label: 'Node 2', color:'DarkViolet'},
{id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
{id: 3, label: 'Node 3', color:'orange'},
{id: 4, label: 'Node 4', color:'DarkViolet'},
{id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
{id: 5, label: 'Node 5', color:'orange'},
{id: 6, label: 'cid = 1', cid:1, color:'orange'},
{id: 7, label: 'cid = 1', cid:1, color:'DarkViolet'},
{id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
{id: 8, label: 'cid = 1', cid:1, color:'lime'},
{id: 9, label: 'cid = 1', cid:1, color:'orange'},
{id: 10, label: 'cid = 1', cid:1, color:'lime'}
@ -72,7 +72,7 @@ Click any of the buttons below to cluster the network. On every push the network
nodes: nodes,
edges: edges
};
var options = {layout:{randomSeed:8},nodes:{font:{strokeWidth:5}}};
var options = {layout:{randomSeed:8}};
var network = new vis.Network(container, data, options);
network.on("selectNode", function(params) {
if (params.nodes.length == 1) {

+ 156
- 0
examples/network/categories/rest/clusteringByZoom.html View File

@ -0,0 +1,156 @@
<!doctype html>
<html>
<head>
<title>Network | Clustering</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width: 600px;
}
h4 {
margin-bottom: 3px;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<p>
You can zoom in and out to cluster/decluster.
</p>
Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
<div id="mynetwork"></div>
<script type="text/javascript">
var clusterIndex = 0;
var clusters = [];
var lastClusterZoomLevel = 0;
var clusterFactor = 0.9;
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'},
{id: 6, label: 'Node 6'},
{id: 7, label: 'Node 7'},
{id: 8, label: 'Node 8'},
{id: 9, label: 'Node 9'},
{id: 10, label: 'Node 10'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 10, to: 4},
{from: 2, to: 5},
{from: 6, to: 2},
{from: 7, to: 5},
{from: 8, to: 6},
{from: 9, to: 7},
{from: 10, to: 9}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {layout: {randomSeed: 8}};
var network = new vis.Network(container, data, options);
// set the first initial zoom level
network.once('initRedraw', function() {
if (lastClusterZoomLevel === 0) {
lastClusterZoomLevel = network.getScale();
}
});
// we use the zoom event for our clustering
network.on('zoom', function (params) {
if (params.direction == '-') {
if (params.scale < lastClusterZoomLevel*clusterFactor) {
makeClusters(params.scale);
lastClusterZoomLevel = params.scale;
}
}
else {
openClusters(params.scale);
}
});
// if we click on a node, we want to open it up!
network.on("selectNode", function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0])
}
}
});
// make the clusters
function makeClusters(scale) {
var clusterOptionsByData = {
processProperties: function (clusterOptions, childNodes) {
clusterIndex = clusterIndex + 1;
var childrenCount = 0;
for (var i = 0; i < childNodes.length; i++) {
childrenCount += childNodes[i].childrenCount || 1;
}
clusterOptions.childrenCount = childrenCount;
clusterOptions.label = "# " + childrenCount + "";
clusterOptions.font = {size: childrenCount*5+30}
clusterOptions.id = 'cluster:' + clusterIndex;
clusters.push({id:'cluster:' + clusterIndex, scale:scale});
return clusterOptions;
},
clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
}
network.clusterOutliers(clusterOptionsByData);
if (document.getElementById('stabilizeCheckbox').checked === true) {
network.stabilize();
}
}
// open them back up!
function openClusters(scale) {
var newClusters = [];
var declustered = false;
for (var i = 0; i < clusters.length; i++) {
if (clusters[i].scale < scale) {
network.openCluster(clusters[i].id);
lastClusterZoomLevel = scale;
declustered = true;
}
else {
newClusters.push(clusters[i])
}
}
clusters = newClusters;
if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
network.stabilize();
}
}
</script>
</body>
</html>

+ 72
- 0
examples/network/categories/rest/configuration.html View File

@ -0,0 +1,72 @@
<!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;
}
p {
font-size:16px;
max-width:700px;
}
</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(25);
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false
},
configure: true
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
this in the network.
</p>
<br />
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 91
- 0
examples/network/categories/rest/performance.html View File

@ -0,0 +1,91 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
#message {
color:darkred;
max-width:600px;
font-size:16px;
cursor:pointer;
text-decoration: underline;
}
</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;
var setSmooth = false;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
var nodeCount = document.getElementById('nodeCount').value;
if (nodeCount > 100) {
document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
}
else if (setSmooth === false) {
document.getElementById("message").innerHTML = '';
}
// create a network
var container = document.getElementById('mynetwork');
var data = getScaleFreeNetwork(nodeCount);
var options = {
physics: { stabilization: false }
};
network = new vis.Network(container, data, options);
}
function disableSmoothCurves() {
setSmooth = true;
network.setOptions({edges:{smooth:{type:'continuous'}}});
document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>';
}
function enableSmoothCurves() {
setSmooth = false;
document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
network.setOptions({edges:{smooth:{type:'dynamic'}}});
}
</script>
<script src="../../../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
Generate a random network with nodes and edges.
</p>
<p>
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="button" value="Go" onclick="draw()">
</form>
</p>
<span id="message"></span>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 5
examples/network/data/WorldCup2014.js View File

@ -9968,8 +9968,3 @@ var edges = [
{from: 732, to: 733},
{from: 734, to: 735}
];
var data = {
nodes: nodes,
edges: edges
};

+ 1
- 1
lib/network/Network.js View File

@ -464,7 +464,7 @@ Network.prototype.selectEdges = function() {return this.selectionHandler
Network.prototype.unselectAll = function() {return this.selectionHandler.unselectAll.apply(this.selectionHandler,arguments);};
Network.prototype.redraw = function() {return this.renderer.redraw.apply(this.renderer,arguments);};
Network.prototype.getScale = function() {return this.view.getScale.apply(this.view,arguments);};
Network.prototype.getPosition = function() {return this.view.getPosition.apply(this.view,arguments);};
Network.prototype.getViewPosition = function() {return this.view.getViewPosition.apply(this.view,arguments);};
Network.prototype.fit = function() {return this.view.fit.apply(this.view,arguments);};
Network.prototype.moveTo = function() {return this.view.moveTo.apply(this.view,arguments);};
Network.prototype.focus = function() {return this.view.focus.apply(this.view,arguments);};

+ 59
- 29
lib/network/modules/Clustering.js View File

@ -9,6 +9,8 @@ class ClusterEngine {
this.options = {};
this.defaultOptions = {};
util.extend(this.options, this.defaultOptions);
this.body.emitter.on('_resetData', () => {this.clusteredNodes = {};})
}
setOptions(options) {
@ -94,29 +96,42 @@ class ClusterEngine {
let childNodesObj = {};
let childEdgesObj = {};
let nodeId = this.body.nodeIndices[i];
if (this.body.nodes[nodeId].edges.length === 1) {
let visibleEdges = 0;
let edge;
for (let j = 0; j < this.body.nodes[nodeId].edges.length; j++) {
if (this.body.nodes[nodeId].edges[j].options.hidden === false) {
visibleEdges++;
edge = this.body.nodes[nodeId].edges[j];
}
}
if (visibleEdges === 1) {
// this is an outlier
let edge = this.body.nodes[nodeId].edges[0];
let childNodeId = this._getConnectedId(edge, nodeId);
if (childNodeId !== nodeId) {
if (options.joinCondition === undefined) {
childEdgesObj[edge.id] = edge;
childNodesObj[nodeId] = this.body.nodes[nodeId];
childNodesObj[childNodeId] = this.body.nodes[childNodeId];
if (this._checkIfUsed(clusters,nodeId,edge.id) === false && this._checkIfUsed(clusters,childNodeId,edge.id) === false) {
childEdgesObj[edge.id] = edge;
childNodesObj[nodeId] = this.body.nodes[nodeId];
childNodesObj[childNodeId] = this.body.nodes[childNodeId];
}
}
else {
let clonedOptions = this._cloneOptions(this.body.nodes[nodeId]);
if (options.joinCondition(clonedOptions) === true) {
if (options.joinCondition(clonedOptions) === true && this._checkIfUsed(clusters,nodeId,edge.id) === false) {
childEdgesObj[edge.id] = edge;
childNodesObj[nodeId] = this.body.nodes[nodeId];
}
clonedOptions = this._cloneOptions(this.body.nodes[childNodeId]);
if (options.joinCondition(clonedOptions) === true) {
if (options.joinCondition(clonedOptions) === true && this._checkIfUsed(clusters,nodeId,edge.id) === false) {
childEdgesObj[edge.id] = edge;
childNodesObj[childNodeId] = this.body.nodes[childNodeId];
}
}
clusters.push({nodes:childNodesObj, edges:childEdgesObj})
if (Object.keys(childNodesObj).length > 0 && Object.keys(childEdgesObj).length > 0) {
clusters.push({nodes: childNodesObj, edges: childEdgesObj})
}
}
}
}
@ -130,6 +145,17 @@ class ClusterEngine {
}
}
_checkIfUsed(clusters, nodeId, edgeId) {
for (let i = 0; i < clusters.length; i++) {
let cluster = clusters[i];
if (cluster.nodes[nodeId] !== undefined || cluster.edges[edgeId] !== undefined) {
return true;
}
}
return false;
}
/**
* suck all connected nodes of a node into the node.
* @param nodeId
@ -283,10 +309,6 @@ class ClusterEngine {
let clusterNodeProperties = util.deepExtend({},options.clusterNodeProperties);
// check if we have an unique id;
if (clusterNodeProperties.id === undefined) {clusterNodeProperties.id = 'cluster:' + util.randomUUID();}
let clusterId = clusterNodeProperties.id;
// construct the clusterNodeProperties
if (options.processProperties !== undefined) {
// get the childNode options
@ -309,6 +331,10 @@ class ClusterEngine {
}
}
// check if we have an unique id;
if (clusterNodeProperties.id === undefined) {clusterNodeProperties.id = 'cluster:' + util.randomUUID();}
let clusterId = clusterNodeProperties.id;
if (clusterNodeProperties.label === undefined) {
clusterNodeProperties.label = 'cluster';
}
@ -472,7 +498,8 @@ class ClusterEngine {
delete this.body.edges[edgeId];
}
else {
// one of the nodes connected to this edge is in a cluster. We give the edge to that cluster and make a new temporary edge.
// one of the nodes connected to this edge is in a cluster. We give the edge to that cluster so it will be released when that cluster is opened.
if (this.clusteredNodes[edge.fromId] !== undefined || this.clusteredNodes[edge.toId] !== undefined) {
let fromId, toId;
let clusteredNode = this.clusteredNodes[edge.fromId] || this.clusteredNodes[edge.toId];
@ -480,23 +507,26 @@ class ClusterEngine {
let clusterNode = this.body.nodes[clusterId];
clusterNode.containedEdges[edgeId] = edge;
if (this.clusteredNodes[edge.fromId] !== undefined) {
fromId = clusterId;
toId = edge.toId;
// if both from and to nodes are visible, we create a new temporary edge
if (edge.from.options.hidden !== true && edge.to.options.hidden !== true) {
if (this.clusteredNodes[edge.fromId] !== undefined) {
fromId = clusterId;
toId = edge.toId;
}
else {
fromId = edge.fromId;
toId = clusterId;
}
let clonedOptions = this._cloneOptions(edge, 'edge');
let id = 'clusterEdge:' + util.randomUUID();
util.deepExtend(clonedOptions, clusterNode.clusterEdgeProperties);
util.deepExtend(clonedOptions, {from: fromId, to: toId, hidden: false, physics: true, id: id});
let newEdge = this.body.functions.createEdge(clonedOptions);
this.body.edges[id] = newEdge;
this.body.edges[id].connect();
}
else {
fromId = edge.fromId;
toId = clusterId;
}
let clonedOptions = this._cloneOptions(edge, 'edge');
let id = 'clusterEdge:' + util.randomUUID();
util.deepExtend(clonedOptions, clusterNode.clusterEdgeProperties);
util.deepExtend(clonedOptions, {from:fromId, to:toId, hidden:false, physics:true, id: id});
let newEdge = this.body.functions.createEdge(clonedOptions);
this.body.edges[id] = newEdge;
this.body.edges[id].connect();
}
else {
edge.options.hidden = false;

+ 1
- 1
lib/network/modules/EdgesHandler.js View File

@ -69,7 +69,7 @@ class EdgesHandler {
}
}
},
selectionWidth: 1,
selectionWidth: 1.5,
selfReferenceSize:20,
shadow:{
enabled: false,

+ 2
- 2
lib/network/modules/InteractionHandler.js View File

@ -407,10 +407,10 @@ class InteractionHandler {
this.body.emitter.emit('_requestRedraw');
if (scaleOld < scale) {
this.body.emitter.emit('zoom', {direction: '+'});
this.body.emitter.emit('zoom', {direction: '+', scale: this.body.view.scale});
}
else {
this.body.emitter.emit('zoom', {direction: '-'});
this.body.emitter.emit('zoom', {direction: '-', scale: this.body.view.scale});
}
}
}

+ 3
- 3
lib/network/modules/NodesHandler.js View File

@ -24,7 +24,7 @@ class NodesHandler {
this.options = {};
this.defaultOptions = {
borderWidth: 1,
borderWidthSelected: undefined,
borderWidthSelected: 2,
brokenImage:undefined,
color: {
border: '#2B7CE9',
@ -378,13 +378,13 @@ class NodesHandler {
let nodeObj = {}; // used to quickly check if node already exists
for (let i = 0; i < node.edges.length; i++) {
let edge = node.edges[i];
if (edge.toId === nodeId) {
if (edge.toId == nodeId) { // these are double equals since ids can be numeric or string
if (nodeObj[edge.fromId] === undefined) {
nodeList.push(edge.fromId);
nodeObj[edge.fromId] = true;
}
}
else if (edge.fromId === nodeId) {
else if (edge.fromId == nodeId) { // these are double equals since ids can be numeric or string
if (nodeObj[edge.toId] === undefined) {
nodeList.push(edge.toId);
nodeObj[edge.toId] = true;

+ 1
- 1
lib/network/modules/PhysicsEngine.js View File

@ -69,7 +69,7 @@ class PhysicsEngine {
stabilization: {
enabled: true,
iterations: 1000, // maximum number of iteration to stabilize
updateInterval: 100,
updateInterval: 50,
onlyDynamicEdges: false,
fit: true
},

+ 1
- 1
lib/network/modules/View.js View File

@ -325,7 +325,7 @@ class View {
return this.body.view.scale;
}
getPosition() {
getViewPosition() {
return {x:this.body.view.translation.x, y:this.body.view.translation.y};
}

+ 5
- 2
lib/network/modules/components/Node.js View File

@ -118,13 +118,13 @@ class Node {
throw "Node must have an id";
}
// set these options locally
if (options.x !== undefined) {this.x = parseInt(options.x); this.predefinedPosition = true;}
if (options.y !== undefined) {this.y = parseInt(options.y); this.predefinedPosition = true;}
if (options.size !== undefined) {this.baseSize = options.size;}
if (options.value !== undefined) {options.value = parseInt(options.value);}
// this transforms all shorthands into fully defined options
Node.parseOptions(this.options, options, true);
// copy group options
if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
@ -134,6 +134,9 @@ class Node {
this.options.color = util.parseColor(this.options.color);
}
// this transforms all shorthands into fully defined options
Node.parseOptions(this.options, options, true);
// load the images
if (this.options.image !== undefined && this.options.image != "") {
if (this.imagelist) {

+ 13
- 12
lib/network/options.js View File

@ -21,6 +21,7 @@ let allOptions = {
enabled: {boolean},
filter: {boolean,string,array,fn},
container: {dom},
showButton: {boolean},
__type__: {object,boolean,string,array,fn}
},
edges: {
@ -322,11 +323,11 @@ let configureOptions = {
min: [10, 0, 200, 1],
max: [30, 0, 200, 1],
label: {
enabled: true,
enabled: false,
min: [14, 0, 200, 1],
max: [30, 0, 200, 1],
maxVisible: [30, 0, 200, 1],
drawThreshold: [3, 0, 20, 1]
drawThreshold: [5, 0, 20, 1]
}
},
shadow:{
@ -357,12 +358,12 @@ let configureOptions = {
size: [14, 0, 100, 1], // px
face: ['arial', 'verdana', 'tahoma'],
background: ['color','none'],
strokeWidth: [1, 0, 50, 1], // px
strokeWidth: [2, 0, 50, 1], // px
strokeColor: ['color','#ffffff'],
align: ['horizontal', 'top', 'middle', 'bottom']
},
hidden: false,
hoverWidth: [2, 0, 5, 0.1],
hoverWidth: [1.5, 0, 5, 0.1],
physics: true,
scaling: {
min: [1, 0, 100, 1],
@ -372,7 +373,7 @@ let configureOptions = {
min: [14, 0, 200, 1],
max: [30, 0, 200, 1],
maxVisible: [30, 0, 200, 1],
drawThreshold: [3, 0, 20, 1]
drawThreshold: [5, 0, 20, 1]
}
},
selectionWidth: [1.5, 0, 5, 0.1],
@ -391,7 +392,7 @@ let configureOptions = {
width: [1, 0, 30, 1]
},
layout: {
randomSeed: [0, 0, 500, 1],
//randomSeed: [0, 0, 500, 1],
hierarchical: {
enabled: false,
levelSeparation: [150, 20, 500, 5],
@ -427,37 +428,37 @@ let configureOptions = {
gravitationalConstant: [-2000, -30000, 0, 50],
centralGravity: [0.3, 0, 10, 0.05],
springLength: [95, 0, 500, 5],
springConstant: [0.04, 0, 5, 0.005],
springConstant: [0.04, 0, 1.2, 0.005],
damping: [0.09, 0, 1, 0.01],
avoidOverlap: [0, 0, 1, 0.01]
},
forceAtlas2Based: {
//theta: [0.5, 0.1, 1, 0.05],
gravitationalConstant: [-800, -3000, 0, 1],
gravitationalConstant: [-50, -500, 0, 1],
centralGravity: [0.01, 0, 1, 0.005],
springLength: [95, 0, 500, 5],
springConstant: [0.08, 0, 5, 0.005],
springConstant: [0.08, 0, 1.2, 0.005],
damping: [0.4, 0, 1, 0.01],
avoidOverlap: [0, 0, 1, 0.01]
},
repulsion: {
centralGravity: [0.2, 0, 10, 0.05],
springLength: [200, 0, 500, 5],
springConstant: [0.05, 0, 5, 0.005],
springConstant: [0.05, 0, 1.2, 0.005],
nodeDistance: [100, 0, 500, 5],
damping: [0.09, 0, 1, 0.01]
},
hierarchicalRepulsion: {
centralGravity: [0.2, 0, 10, 0.05],
springLength: [100, 0, 500, 5],
springConstant: [0.01, 0, 5, 0.005],
springConstant: [0.01, 0, 1.2, 0.005],
nodeDistance: [120, 0, 500, 5],
damping: [0.09, 0, 1, 0.01]
},
maxVelocity: [50, 0, 150, 1],
minVelocity: [0.1, 0.01, 0.5, 0.01],
solver: ['barnesHut', 'forceAtlas2Based', 'repulsion', 'hierarchicalRepulsion'],
timestep: [0.5, 0, 1, 0.05]
timestep: [0.5, 0.01, 1, 0.01]
},
global: {
locale: ['en', 'nl']

+ 32
- 19
lib/shared/Configurator.js View File

@ -27,7 +27,8 @@ class Configurator {
this.defaultOptions = {
enabled: false,
filter: true,
container: undefined
container: undefined,
showButton: true
};
util.extend(this.options, this.defaultOptions);
@ -61,6 +62,9 @@ class Configurator {
if (options.filter !== undefined) {
this.options.filter = options.filter;
}
if (options.showButton !== undefined) {
this.options.showButton = options.showButton;
}
if (options.enabled !== undefined) {
enabled = options.enabled;
}
@ -107,7 +111,7 @@ class Configurator {
show = false;
if (typeof filter === 'function') {
show = filter(option,[]);
show = show || this._handleObject(this.configureOptions[option], [option]);
show = show || this._handleObject(this.configureOptions[option], [option], true);
}
else if (filter === true || filter.indexOf(option) !== -1) {
show = true;
@ -129,18 +133,21 @@ class Configurator {
counter++;
}
}
let generateButton = document.createElement('div');
generateButton.className = 'vis-network-configuration button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = () => {this._printOptions();};
generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-network-configuration vis-option-container';
if (this.options.showButton === true) {
let generateButton = document.createElement('div');
generateButton.className = 'vis-network-configuration button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = () => {this._printOptions();};
generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-network-configuration vis-option-container';
this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
}
this._push();
this.colorPicker.insertTo(this.container);
@ -447,24 +454,30 @@ class Configurator {
* @param path
* @private
*/
_handleObject(obj, path = []) {
_handleObject(obj, path = [], checkOnly = false) {
let show = false;
let filter = this.options.filter;
let visibleInSet = false;
for (let subObj in obj) {
if (obj.hasOwnProperty(subObj)) {
show = false;
show = true;
let item = obj[subObj];
let newPath = util.copyAndExtendArray(path, subObj);
if (typeof filter === 'function') {
show = filter(subObj,path);
}
else if (filter === true) {
show = true;
// if needed we must go deeper into the object.
if (show === false) {
if (!(item instanceof Array) && typeof item !== 'string' && typeof item !== 'boolean' && item instanceof Object) {
this.allowCreation = false;
show = this._handleObject(item, newPath, true);
this.allowCreation = checkOnly === false;
}
}
}
if (show !== false) {
visibleInSet = true;
let item = obj[subObj];
let newPath = util.copyAndExtendArray(path, subObj);
let value = this._getValue(newPath);
if (item instanceof Array) {

Write Preview
Loading…
Cancel
Save