diff options
Diffstat (limited to 'www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html')
| -rw-r--r-- | www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html deleted file mode 100644 index de536e54..00000000 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html +++ /dev/null @@ -1,152 +0,0 @@ -<!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> - <script src="../../googleAnalytics.js"></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> |
