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; + }); + } + + +

Hierarchical Layout - User-defined

+
- 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. + 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.

- - - - - + + + + +

@@ -123,22 +128,22 @@