Changes for v22.0.0.OS

This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
var data = getScaleFreeNetwork(nodeCount)
// create a network
var container = document.getElementById('mynetwork');
var directionInput = document.getElementById("direction").value;
var options = {
layout: {
hierarchical: {
direction: directionInput
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - 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.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br/>
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function () {
directionInput.value = "UD";
draw();
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function () {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function () {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function () {
directionInput.value = "RL";
draw();
};
</script>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout</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-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var network = null;
function p(data) {
var container = document.getElementById('mynetwork');
var options = {
layout: {
hierarchical: {},
},
};
console.log("starting layout");
network = new vis.Network(container, data, options);
console.log("layout complete");
}
</script>
</head>
<body>
<h2>Hierarchical Layout</h2>
<div id="mynetwork"></div>
<script type="text/javascript" src="./demo.jsonp"></script>
</body>
</html>

View File

@@ -0,0 +1,108 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical layout difference</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 800px;
height: 500px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var network = null;
var layoutMethod = "directed";
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
var nodes = [];
var edges = [];
// randomly create some nodes and edges
for (var i = 0; i < 19; i++) {
nodes.push({id: i, label: String(i)});
}
edges.push({from: 0, to: 1});
edges.push({from: 0, to: 6});
edges.push({from: 0, to: 13});
edges.push({from: 0, to: 11});
edges.push({from: 1, to: 2});
edges.push({from: 2, to: 3});
edges.push({from: 2, to: 4});
edges.push({from: 3, to: 5});
edges.push({from: 1, to: 10});
edges.push({from: 1, to: 7});
edges.push({from: 2, to: 8});
edges.push({from: 2, to: 9});
edges.push({from: 3, to: 14});
edges.push({from: 1, to: 12});
edges.push({from: 16, to: 15});
edges.push({from: 15, to: 17});
edges.push({from: 18, to: 17});
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout: {
hierarchical: {
sortMethod: layoutMethod
}
},
edges: {
smooth: true,
arrows: {to : true }
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw();">
<h2>Hierarchical layout difference</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
Try switching between the methods with the dropdown box below.
</div>
Layout method:
<select id="layout">
<option value="hubsize">hubsize</option>
<option value="directed">directed</option>
</select><br/>
<br />
<div id="mynetwork"></div>
<p id="selection"></p>
<script language="JavaScript">
var dropdown = document.getElementById("layout");
dropdown.onchange = function() {
layoutMethod = dropdown.value;
draw();
}
</script>
</body>
</html>

View File

@@ -0,0 +1,152 @@
<!doctype html>
<html>
<head>
<title>Network | Hierarchical Layout, userDefined</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-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
var directionInput = document.getElementById("direction");
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
for (var i = 0; i < 15; i++) {
nodes.push({id: i, label: String(i)});
}
edges.push({from: 0, to: 1});
edges.push({from: 0, to: 6});
edges.push({from: 0, to: 13});
edges.push({from: 0, to: 11});
edges.push({from: 1, to: 2});
edges.push({from: 2, to: 3});
edges.push({from: 2, to: 4});
edges.push({from: 3, to: 5});
edges.push({from: 1, to: 10});
edges.push({from: 1, to: 7});
edges.push({from: 2, to: 8});
edges.push({from: 2, to: 9});
edges.push({from: 3, to: 14});
edges.push({from: 1, to: 12});
nodes[0]["level"] = 0;
nodes[1]["level"] = 1;
nodes[2]["level"] = 3;
nodes[3]["level"] = 4;
nodes[4]["level"] = 4;
nodes[5]["level"] = 5;
nodes[6]["level"] = 1;
nodes[7]["level"] = 2;
nodes[8]["level"] = 4;
nodes[9]["level"] = 4;
nodes[10]["level"] = 2;
nodes[11]["level"] = 1;
nodes[12]["level"] = 2;
nodes[13]["level"] = 1;
nodes[14]["level"] = 5;
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal',
roundness: 0.4
}
},
layout: {
hierarchical: {
direction: directionInput.value
}
},
physics:false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - User-defined</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for
all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
</div>
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<div id="mynetwork"></div>
<p id="selection"></p>
<script language="JavaScript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function () {
directionInput.value = "UD";
draw();
};
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function () {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function () {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function () {
directionInput.value = "RL";
draw();
};
</script>
</body>
</html>

View File

@@ -0,0 +1,89 @@
<html>
<head>
<meta charset="utf-8">
<title>Hierarchical Layout without Physics</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#network{
width: 1000px;
height: 400px;
border: 1px solid lightgray;
}
td {
vertical-align:top;
}
table {
width:800px;
}
</style>
</head>
<body>
<h1>Hierarchical Layout without Physics</h1>
The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are: <br /><br />
<table>
<tr>
<td width="150px"><code>levelSeparation</code></td>
<td width="400px">Distance between levels.</td>
</tr>
<tr>
<td><code>nodeSpacing</code></td>
<td>Minimum distance between nodes on the free axis.</td>
</tr>
<tr>
<td><code>treeSpacing</code></td>
<td>Distance between different trees (independent networks).</td>
</tr>
<tr>
<td><code>blockShifting</code></td>
<td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift
it's branch along with it for as far as it can, respecting the nodeSpacing on any level.</td>
</tr>
<tr>
<td><code>edgeMinimization</code></td>
<td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process.
Each node will try to move along its free axis to reduce the total length of it's edges.</td>
</tr>
<tr>
<td><code>parentCentralization</code></td>
<td>When true, the parents nodes will be centered again after the the layout algorithm has been finished.</td>
</tr>
</table>
<br /><br />
Play with the settings below the network and see how the layout changes!
<div id="network"></div>
<script>
var data = {
nodes: nodes,
edges: edges
};
// create a network
var container = document.getElementById('network');
var options = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed"
}
},
interaction: {dragNodes :false},
physics: {
enabled: false
},
configure: {
filter: function (option, path) {
if (path.indexOf('hierarchical') !== -1) {
return true;
}
return false;
},
showButton:false
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!doctype html>
<html>
<head>
<title>Network | Setting the random seed</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes
are settled.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {layout:{randomSeed:2}};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>