diff --git a/examples/network/layout/hierarchicalLayout.html b/examples/network/layout/hierarchicalLayout.html index 9ddb5935..d827814c 100644 --- a/examples/network/layout/hierarchicalLayout.html +++ b/examples/network/layout/hierarchicalLayout.html @@ -9,8 +9,8 @@ } #mynetwork { - width: 1700px; - height: 800px; + width: 600px; + height: 600px; border: 1px solid lightgray; } @@ -34,76 +34,28 @@ function draw() { destroy(); - - nodes = []; - edges = []; // randomly create some nodes and edges var nodeCount = document.getElementById('nodeCount').value; - 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}); + var data = getScaleFreeNetwork(nodeCount) + // create a network var container = document.getElementById('mynetwork'); - var data = { - nodes: nodes, - edges: edges - }; var directionInput = document.getElementById("direction").value; var options = { layout: { hierarchical: { - sortMethod: 'hubsize', direction: directionInput } - }, - physics:false + } }; network = new vis.Network(container, data, options); - fireall() + // add event listeners network.on('select', function (params) { document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; }); } - function fireall() { - if (callbackIndex < CALLBACKS.length -1) { - CALLBACKS[callbackIndex](); - callbackIndex++; - fireall() - } - } - function fireCallback() { - if (callbackIndex < CALLBACKS.length -1) { - CALLBACKS[callbackIndex](); - callbackIndex++; - } - else { - alert("no more callbacks"); - } - - } - - var callbackIndex = 0; - var CALLBACKS = []; - diff --git a/examples/network/layout/hierarchicalLayoutMethods.html b/examples/network/layout/hierarchicalLayoutMethods.html index 0c4c2392..51f55267 100644 --- a/examples/network/layout/hierarchicalLayoutMethods.html +++ b/examples/network/layout/hierarchicalLayoutMethods.html @@ -19,7 +19,7 @@ - + - - + // 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; + }); + } + + +
- - - - - + + + + +
@@ -123,22 +128,22 @@