From d01112fc17b80fe67d3a45c66fc5c151c4501b22 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 1 May 2015 10:35:07 +0200 Subject: [PATCH] Updated examples 32, 33 --- .../network/32_hierarchicaLayoutMethods.html | 163 ++++---- examples/network/33_animation.html | 358 +++++++++--------- 2 files changed, 265 insertions(+), 256 deletions(-) diff --git a/examples/network/32_hierarchicaLayoutMethods.html b/examples/network/32_hierarchicaLayoutMethods.html index de34d123..5b64fb7d 100644 --- a/examples/network/32_hierarchicaLayoutMethods.html +++ b/examples/network/32_hierarchicaLayoutMethods.html @@ -1,98 +1,101 @@ - Network | Hierarchical layout difference + Network | Hierarchical layout difference - - - - + - + - function destroy() { - if (network !== null) { - network.destroy(); - network = null; - } - } + - + // add event listeners + network.on('select', function(params) { + document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; + }); + } + + + +

Hierarchical layout difference

- 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. + 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.
Layout method:

@@ -100,11 +103,11 @@ Layout method:

diff --git a/examples/network/33_animation.html b/examples/network/33_animation.html index 88815832..39962d02 100644 --- a/examples/network/33_animation.html +++ b/examples/network/33_animation.html @@ -8,30 +8,30 @@ font: 10pt sans; } #mynetwork { - width: 600px; - height: 600px; + width: 600px; + height: 600px; border: 1px solid lightgray; } - div.left { - position:relative; - float:left; - width:300px; - border: 1px #c7c7c7 solid; - height:590px; - padding:5px; - } + div.left { + position:relative; + float:left; + width:300px; + border: 1px #c7c7c7 solid; + height:590px; + padding:5px; + } - div.right { - padding-left:10px; - float:left; - width:600px; - } + div.right { + padding-left:10px; + float:left; + width:600px; + } - div.bottom { - position:absolute; - bottom:5px; - } + div.bottom { + position:absolute; + bottom:5px; + } @@ -44,21 +44,21 @@ var doButton, focusButton, showButton; var statusUpdateSpan; - var finishMessage = ""; + var finishMessage = ''; function destroy() { - if (network !== null) { - network.destroy(); - network = null; - } + if (network !== null) { + network.destroy(); + network = null; + } } function draw() { destroy(); - statusUpdateSpan = document.getElementById("statusUpdate"); - doButton = document.getElementById("btnDo"); - focusButton = document.getElementById("btnFocus"); - showButton = document.getElementById("btnShow"); + statusUpdateSpan = document.getElementById('statusUpdate'); + doButton = document.getElementById('btnDo'); + focusButton = document.getElementById('btnFocus'); + showButton = document.getElementById('btnShow'); nodes = []; edges = []; var connectionCount = []; @@ -112,7 +112,13 @@ nodes: nodes, edges: edges }; - var options = {stabilizationIterations:1200}; + var options = { + physics: { + stabilization: { + iterations: 1200 + } + } + }; network = new vis.Network(container, data, options); // add event listeners @@ -120,138 +126,138 @@ document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; }); network.on('stabilized', function (params) { - document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.'; + document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.'; }); - network.on("animationFinished", function() { - statusUpdateSpan.innerHTML = finishMessage; + network.on('animationFinished', function() { + statusUpdateSpan.innerHTML = finishMessage; }) - } function zoomExtentAnimated() { - var offsetx = parseInt(document.getElementById("offsetx").value); - var offsety = parseInt(document.getElementById("offsety").value); - var duration = parseInt(document.getElementById("duration").value); - var easingFunction = document.getElementById("easingFunction").value; + var offsetx = parseInt(document.getElementById('offsetx').value); + var offsety = parseInt(document.getElementById('offsety').value); + var duration = parseInt(document.getElementById('duration').value); + var easingFunction = document.getElementById('easingFunction').value; - var options = {offset: {x:offsetx,y:offsety}, - duration: duration, - easingFunction: easingFunction - } - statusUpdateSpan.innerHTML = "Doing ZoomExtent() Animation."; - finishMessage = "Animation finished." - network.zoomExtent(options); + var options = {offset: {x:offsetx,y:offsety}, + duration: duration, + easingFunction: easingFunction + }; + statusUpdateSpan.innerHTML = 'Doing ZoomExtent() Animation.'; + finishMessage = 'Animation finished.'; + network.fit(options); } function doDefaultAnimation() { - var offsetx = parseInt(document.getElementById("offsetx").value); - var offsety = parseInt(document.getElementById("offsety").value); - var scale = parseFloat(document.getElementById("scale").value); - var positionx = parseInt(document.getElementById("positionx").value); - var positiony = parseInt(document.getElementById("positiony").value); - var easingFunction = document.getElementById("easingFunction").value; + var offsetx = parseInt(document.getElementById('offsetx').value); + var offsety = parseInt(document.getElementById('offsety').value); + var scale = parseFloat(document.getElementById('scale').value); + var positionx = parseInt(document.getElementById('positionx').value); + var positiony = parseInt(document.getElementById('positiony').value); + var easingFunction = document.getElementById('easingFunction').value; - var options = { - position: {x:positionx,y:positiony}, - scale: scale, - offset: {x:offsetx,y:offsety}, - animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad. - } - statusUpdateSpan.innerHTML = "Doing Animation."; - finishMessage = "Animation finished." - network.moveTo(options); + var options = { + position: {x:positionx,y:positiony}, + scale: scale, + offset: {x:offsetx,y:offsety}, + animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad. + }; + statusUpdateSpan.innerHTML = 'Doing Animation.'; + finishMessage = 'Animation finished.'; + network.moveTo(options); } function doAnimation() { - var offsetx = parseInt(document.getElementById("offsetx").value); - var offsety = parseInt(document.getElementById("offsety").value); - var duration = parseInt(document.getElementById("duration").value); - var scale = parseFloat(document.getElementById("scale").value); - var positionx = parseInt(document.getElementById("positionx").value); - var positiony = parseInt(document.getElementById("positiony").value); - var easingFunction = document.getElementById("easingFunction").value; + var offsetx = parseInt(document.getElementById('offsetx').value); + var offsety = parseInt(document.getElementById('offsety').value); + var duration = parseInt(document.getElementById('duration').value); + var scale = parseFloat(document.getElementById('scale').value); + var positionx = parseInt(document.getElementById('positionx').value); + var positiony = parseInt(document.getElementById('positiony').value); + var easingFunction = document.getElementById('easingFunction').value; - var options = { - position: {x:positionx,y:positiony}, - scale: scale, - offset: {x:offsetx,y:offsety}, - animation: { - duration: duration, - easingFunction: easingFunction - } + var options = { + position: {x:positionx,y:positiony}, + scale: scale, + offset: {x:offsetx,y:offsety}, + animation: { + duration: duration, + easingFunction: easingFunction } - statusUpdateSpan.innerHTML = "Doing Animation."; - finishMessage = "Animation finished." - network.moveTo(options); + }; + statusUpdateSpan.innerHTML = 'Doing Animation.'; + finishMessage = 'Animation finished.'; + network.moveTo(options); } function focusRandom() { - var nodeId = Math.floor(Math.random() * 25); - var offsetx = parseInt(document.getElementById("offsetx").value); - var offsety = parseInt(document.getElementById("offsety").value); - var duration = parseInt(document.getElementById("duration").value); - var scale = parseFloat(document.getElementById("scale").value); - var easingFunction = document.getElementById("easingFunction").value; + var nodeId = Math.floor(Math.random() * 25); + var offsetx = parseInt(document.getElementById('offsetx').value); + var offsety = parseInt(document.getElementById('offsety').value); + var duration = parseInt(document.getElementById('duration').value); + var scale = parseFloat(document.getElementById('scale').value); + var easingFunction = document.getElementById('easingFunction').value; - var options = { - // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes - scale: scale, - offset: {x:offsetx,y:offsety}, - animation: { - duration: duration, - easingFunction: easingFunction - } + var options = { + // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes + scale: scale, + offset: {x:offsetx,y:offsety}, + animation: { + duration: duration, + easingFunction: easingFunction } - statusUpdateSpan.innerHTML = "Focusing on node: " + nodeId; - finishMessage = "Node: " + nodeId + " in focus."; - network.focusOnNode(nodeId, options); + }; + statusUpdateSpan.innerHTML = 'Focusing on node: ' + nodeId; + finishMessage = 'Node: ' + nodeId + ' in focus.'; + network.focus(nodeId, options); } var showInterval = false; var showPhase = 1; function startShow() { - if (showInterval !== false) { - showInterval = false; - showButton.value = "Start a show!"; - network.zoomExtent(); - } - else { - showButton.value = "Stop the show!"; - var duration = parseInt(document.getElementById("duration").value); - focusRandom(); - window.setTimeout(doTheShow, duration); - showInterval = true; - } + if (showInterval !== false) { + showInterval = false; + showButton.value = 'Start a show!'; + network.fit(); + } + else { + showButton.value = 'Stop the show!'; + var duration = parseInt(document.getElementById('duration').value); + focusRandom(); + setTimeout(doTheShow, duration); + showInterval = true; + } } function doTheShow() { - if (showInterval == true) { - var duration = parseInt(document.getElementById("duration").value); - if (showPhase == 0) { - focusRandom(); - showPhase = 1; - } - else { - zoomExtentAnimated(); - showPhase = 0; - } - window.setTimeout(doTheShow, duration); + if (showInterval == true) { + var duration = parseInt(document.getElementById('duration').value); + if (showPhase == 0) { + focusRandom(); + showPhase = 1; } + else { + zoomExtentAnimated(); + showPhase = 0; + } + setTimeout(doTheShow, duration); + } } - + +

Camera animations

- You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can - also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs. -

- The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using - the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function. -

- Here you can see a full description of the options you can supply to moveTo: + You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can + also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs. +

+ The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using + the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function. +

+ Here you can see a full description of the options you can supply to moveTo: 
 var moveToOptions = {
@@ -267,60 +273,60 @@ var moveToOptions = {
                                         // easeInQuint, easeOutQuint, easeInOutQuint
- - - - - - - - - - - - - - - - - - - - - - -
position x
position y
scale
offset x px
offset y px
duration ms
easingFunction - -
-
-
- Examples: -
-
-
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + +
position x
position y
scale
offset x px
offset y px
duration ms
easingFunction + +
+
+
+ Examples: +
+
+
+
+
+
-
+
-

-

+

+