Changes for v22.0.0.OS
This commit is contained in:
1894
web/bower_components/vis/examples/network/layout/demo.jsonp
vendored
Normal file
1894
web/bower_components/vis/examples/network/layout/demo.jsonp
vendored
Normal file
File diff suppressed because it is too large
Load Diff
3762
web/bower_components/vis/examples/network/layout/demo_big.jsonp
vendored
Normal file
3762
web/bower_components/vis/examples/network/layout/demo_big.jsonp
vendored
Normal file
File diff suppressed because it is too large
Load Diff
114
web/bower_components/vis/examples/network/layout/hierarchicalLayout.html
vendored
Normal file
114
web/bower_components/vis/examples/network/layout/hierarchicalLayout.html
vendored
Normal 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>
|
||||
46
web/bower_components/vis/examples/network/layout/hierarchicalLayoutBigUserDefined.html
vendored
Normal file
46
web/bower_components/vis/examples/network/layout/hierarchicalLayoutBigUserDefined.html
vendored
Normal 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>
|
||||
108
web/bower_components/vis/examples/network/layout/hierarchicalLayoutMethods.html
vendored
Normal file
108
web/bower_components/vis/examples/network/layout/hierarchicalLayoutMethods.html
vendored
Normal 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>
|
||||
152
web/bower_components/vis/examples/network/layout/hierarchicalLayoutUserdefined.html
vendored
Normal file
152
web/bower_components/vis/examples/network/layout/hierarchicalLayoutUserdefined.html
vendored
Normal 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>
|
||||
89
web/bower_components/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html
vendored
Normal file
89
web/bower_components/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html
vendored
Normal 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>
|
||||
60
web/bower_components/vis/examples/network/layout/randomSeed.html
vendored
Normal file
60
web/bower_components/vis/examples/network/layout/randomSeed.html
vendored
Normal 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>
|
||||
Reference in New Issue
Block a user