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.
132 lines
8.5 KiB
132 lines
8.5 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/style.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();">
|
|
<!-- 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="http://www.visjs.org/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="http://www.visjs.org/blog.html">Blog</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
|
|
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
|
|
<li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
|
|
<li><a href="http://www.visjs.org/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 - layout</h1>
|
|
<p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>The options for the layout module have to be contained in an object titled 'layout'.</p>
|
|
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
|
|
<ul class="nav nav-tabs">
|
|
<li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
|
|
<li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
|
|
<li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
|
|
</ul>
|
|
<br>
|
|
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
|
|
// these are all options in full.
|
|
var options = {
|
|
layout: {
|
|
randomSeed: undefined,
|
|
hierarchical: {
|
|
enabled:false,
|
|
levelSeparation: 150,
|
|
direction: 'UD', // UD, DU, LR, RL
|
|
sortMethod: 'hubsize' // hubsize, directed
|
|
}
|
|
}
|
|
}
|
|
|
|
network.setOptions(options);
|
|
</pre>
|
|
|
|
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
|
|
// only the options that have shorthand notations are shown.
|
|
var options = {
|
|
layout:{
|
|
hierarchical: true
|
|
}
|
|
}
|
|
|
|
network.setOptions(options);
|
|
</pre>
|
|
<p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
|
|
<table class="options" id="optionTable">
|
|
<tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr>
|
|
<tr><td>randomSeed</td><td>Number</td><td><code>undefined</code></td> <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
|
|
<tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td> <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
|
|
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td> <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
|
|
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td> <td>The distance between the different levels.</td></tr>
|
|
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td> <td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
|
|
<tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td> <td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
|
|
Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br>
|
|
Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
|
|
</table>
|
|
|
|
</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>
|