visjs-network
Version:
A dynamic, browser-based network visualization library.
120 lines (118 loc) • 5.11 kB
HTML
<html>
<head>
<title>Network | Animation</title>
<style type='text/css'>
body {
font: 10pt sans;
}
#mynetwork {
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.right {
padding-left:10px;
float:left;
width:600px;
}
div.bottom {
position:absolute;
bottom:5px;
}
</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 src='./index.js' type='text/javascript'>
</script>
</head>
<body onload='draw();'>
<h2>Camera animations</h2>
<div style='width:700px; font-size:14px;'>
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 .fit() and .focusOnNode() methods. These are explained in the docs.
<br /><br/>
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 fit takes only the duration and easing function.
<br/><br/>
Here you can see a full description of the options you can supply to moveTo:
</div>
<pre>
var moveToOptions = {
position: {x:x, y:x}, // position to animate to (Numbers)
scale: 1.0, // scale to animate to (Number)
offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
animation: { // animation object, can also be Boolean
duration: 1000, // animation duration in milliseconds (Number)
easingFunction: 'easeInOutQuad' // Animation easing function, available are:
} // linear, easeInQuad, easeOutQuad, easeInOutQuad,
} // easeInCubic, easeOutCubic, easeInOutCubic,
// easeInQuart, easeOutQuart, easeInOutQuart,
// easeInQuint, easeOutQuint, easeInOutQuint
</pre>
<div class='left'>
<table>
<tr>
<td>position x</td><td><input type='text' value='300' id='positionx' style='width:170px;'></td>
</tr>
<tr>
<td>position y</td><td><input type='text' value='300' id='positiony' style='width:170px;'></td>
</tr>
<tr>
<td>scale</td><td><input type='text' value='1.0' id='scale' style='width:170px;'></td>
</tr>
<tr>
<td>offset x</td><td><input type='text' value='0' id='offsetx' style='width:170px;'> px</td>
</tr>
<tr>
<td>offset y</td><td><input type='text' value='0' id='offsety' style='width:170px;'> px</td>
</tr>
<tr>
<td>duration</td><td><input type='text' value='1000' id='duration' style='width:170px;'> ms</td>
</tr>
<tr>
<td>easingFunction</td><td>
<select id='easingFunction' style='width:174px;'>
<option value='linear'>linear</option>
<option value='easeInQuad'>easeInQuad</option>
<option value='easeOutQuad'>easeOutQuad</option>
<option value='easeInOutQuad' selected='selected'>easeInOutQuad</option>
<option value='easeInCubic'>easeInCubic</option>
<option value='easeOutCubic'>easeOutCubic</option>
<option value='easeInOutCubic'>easeInOutCubic</option>
<option value='easeInQuart'>easeInQuart</option>
<option value='easeOutQuart'>easeOutQuart</option>
<option value='easeInOutQuart'>easeInOutQuart</option>
<option value='easeInQuint'>easeInQuint</option>
<option value='easeOutQuint'>easeOutQuint</option>
<option value='easeInOutQuint'>easeInOutQuint</option>
</select>
</td>
</tr>
</table>
<div class='bottom'>
<span id='statusUpdate'></span><br />
Examples:
<input type='button' onclick='doAnimation();' value='Animate with above settings.' style='width:300px;' id='btnDo'> <br/>
<input type='button' onclick='doDefaultAnimation();' value='Animate with default settings.' style='width:300px;' id='btnDoDefault'> <br/>
<input type='button' onclick='fitAnimated();' value='Animated fit().' style='width:300px;' id='btnZoom'> <br/>
<input type='button' onclick='focusRandom();' value='Focus on random node.' style='width:300px;' id='btnFocus'><br/>
<input type='button' onclick='startShow();' value='Start a show!' style='width:300px;' id='btnShow'><br/>
</div>
</div>
<div class='right'>
<div id='mynetwork'></div>
<p id='selection'></p>
<p id='stabilization'></p>
</div>
</body>
</html>