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.
160 lines
17 KiB
160 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="en"><head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<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]-->
|
|
|
|
|
|
<script src="../js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<style>
|
|
td.properties {
|
|
width:350px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../js/toggleTable.js"></script>
|
|
</head>
|
|
<!-- NAVBAR
|
|
================================================== -->
|
|
<body>
|
|
|
|
<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 - physics</h1>
|
|
<p>Handles the HTML part of the canvas.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
|
|
<table class="moduleTable" id="physicsTable">
|
|
<tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></tr>
|
|
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
|
|
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td> <td class="mid">Number</td> <td class="mid"><code>-2000</code></td> <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
|
|
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.3</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
|
|
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springLength</td> <td class="mid">Number</td> <td class="mid"><code>95</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
|
|
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.04</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
|
|
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
|
|
|
|
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','repulsion');"><td><span parent="repulsion" class="right-caret"></span> repulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
|
|
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>This is the range of influence for the repulsion.</td></tr>
|
|
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.2</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
|
|
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>200</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
|
|
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.05</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
|
|
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
|
|
|
|
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','hierarchicalRepulsion');"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
|
|
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>120</code></td> <td>This is the range of influence for the repulsion.</td></tr>
|
|
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.0'</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
|
|
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
|
|
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.01</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
|
|
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
|
|
|
|
<tr><td>maxVelocity</td> <td class="mid">Number</td> <td class="mid"><code>50</code></td> <td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
|
|
<tr><td>minVelocity</td> <td class="mid">Number</td> <td class="mid"><code>0.1</code></td> <td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
|
|
<tr><td>solver</td> <td class="mid">String</td> <td class="mid"><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut','repulsion','hierarchicalRepulsion'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
|
|
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','stabilization');"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td class="mid">Object | Boolean</td><td class="mid"><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
|
|
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
|
|
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td class="mid">Number</td> <td class="mid"><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
|
|
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
|
|
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
|
|
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.zoomExtent</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
|
|
<tr><td>timestep</td> <td class="mid">Number</td> <td class="mid"><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
|
|
</table>
|
|
|
|
<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>name</td><td>returns</td><td>description</td></tr>
|
|
<tr><td>startSimulation()</td> <td class="mid">none</td><td>Start the physics simulation. This is normally done whenever needed and is only really useful if you stop the simulation yourself and wish to continue it afterwards.</td>.</td></tr>
|
|
<tr><td>stopSimulation()</td> <td class="mid">none</td><td>This stops the physics simulation and triggers a <code>stabilized</code> event. It can be restarted by dragging a node, altering the dataset or calling <code>startSimulation()</code>.</td></tr>
|
|
<tr><td>stabilize()</td> <td class="mid">none</td><td>You can manually call stabilize at any time. All the stabilization options above are used.</td></tr>
|
|
</table>
|
|
|
|
<h3>Events</h3>
|
|
<p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
|
|
<tr><td>startStabilizing</td><td class="mid">none</td><td>Fired when stabilization starts. This is also the case when you drag a node and the physics simulation restarts to stabilize again. Stabilization does not neccesarily imply 'without showing'.</td>
|
|
<tr><td>stabilizationProgress</td><td class="mid">
|
|
<pre class="code">
|
|
{
|
|
iterations: Number // iterations so far,
|
|
total: Number // total iterations in options
|
|
}
|
|
</pre></td><td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization.</td></tr>
|
|
<tr><td>stabilizationIterationsDone</td><td class="mid">none</td><td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is stabilized; it could also mean that the amount of iterations defined in the options has been reached.</td>
|
|
<tr><td>stabilized</td><td class="mid">
|
|
<pre class="code">
|
|
{
|
|
iterations: Number // iterations it took
|
|
}
|
|
</pre>
|
|
</td><td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize the network.</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>
|