You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
8.0 KiB
158 lines
8.0 KiB
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" HREF="favicon.ico">
|
|
<title>vis.js - A dynamic, browser based visualization library.</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../css/bootstrap.css" rel="stylesheet">
|
|
<link href="../css/newdocs.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
|
|
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
|
|
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
|
|
|
|
<script src="../js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../js/toggleTable.js"></script>
|
|
</head>
|
|
<body onload="prettyPrint();">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="../index.html#modules">Modules</a></li>
|
|
<li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="../img/external-link-icons/external-link-icon-white.png"></a></li>
|
|
<li><a href="../blog.html">Blog</a></li>
|
|
<li><a href="../index.html#download_install">Download</a></li>
|
|
<li><a href="../showcase/index.html">Showcase</a></li>
|
|
<li><a href="../index.html#contribute">Contribute</a></li>
|
|
<li><a href="../featureRequests.html">Feature requests</a></li>
|
|
<li><a href="../index.html#licenses">License</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
<div class="container full">
|
|
<h1>Network - view</h1>
|
|
<p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>The view has no options.</p>
|
|
|
|
<h3>Methods</h3>
|
|
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
|
|
<tr><td>getScale()</td> <td class="mid">Number</td><td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td></tr>
|
|
<tr><td>getPosition()</td> <td class="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr>
|
|
<tr><td>fit(<code>[Object options]</code>)</td><td class="mid">none</td><td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
|
|
<pre class="code">
|
|
{
|
|
nodes:[Array of nodeIds],
|
|
duration: Number,
|
|
easingFunction: String
|
|
}
|
|
</pre>
|
|
The nodes can be used to zoom to fit only specific nodes in the view. <br /><br />
|
|
The other options are explained in the <code>moveTo()</code> description above.
|
|
All options are optional for zoomExtent.
|
|
</td></tr>
|
|
<tr><td>moveTo(<code>Object options</code>)</td> <td class="mid">none</td><td>You can animate or move the camera using the moveTo method. Options are:
|
|
<pre class="code">
|
|
{
|
|
position: {x:Number, y:Number},
|
|
scale: Number,
|
|
offset: {x:Number, y:Number}
|
|
animation: { // -------------------> can be a boolean too!
|
|
duration: Number
|
|
easingFunction: String
|
|
}
|
|
}
|
|
</pre>
|
|
The position (in canvas units!) is the position of the central focus point of the camera. <br><br>
|
|
The scale is the target zoomlevel. Default value is 1.0. <br><br>
|
|
The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is {x:0,y:0}.<br><br>
|
|
For animation you can either use a Boolean to use it with the default options or disable it or you can define the duration (in milliseconds) and easing function manually. Available are:
|
|
<code>linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint</code>. <br><br>
|
|
<i>You will have to define at least a scale or a position. Otherwise, there is nothing to move to.</i>
|
|
</td></tr>
|
|
|
|
|
|
<tr><td>focusOnNode(<br>
|
|
<code>String nodeId</code>,<br>
|
|
<code>[Object options]</code><br>)</td><td class="mid">none</td>
|
|
<td>You can focus on a node with this function. What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken.
|
|
You can supply options to customize the effect:
|
|
<pre class="code">
|
|
{
|
|
scale: Number,
|
|
offset: {x:Number, y:Number}
|
|
locked: boolean
|
|
animation: { // -------------------> can be a boolean too!
|
|
duration: Number
|
|
easingFunction: String
|
|
}
|
|
}
|
|
</pre>
|
|
All options except for locked are explained in the <code>moveTo()</code> description above. Locked denotes whether or not the view remains locked to the node once the zoom-in animation is finished. Default value is true. The options object is optional in focusOnNode.</td></tr>
|
|
<tr><td>releaseNode()</td><td class="mid">none</td><td>Programatically release the focussed node.</td></tr>
|
|
|
|
|
|
</table>
|
|
|
|
<h3>Events</h3>
|
|
<p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
|
|
<tr><td>animationFinished</td><td class="mid">none</td><td>Fired when an animation is finished.</td>
|
|
</table>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../js/ie10-viewport-bug-workaround.js"></script>
|
|
|