diff options
Diffstat (limited to 'www/lib/vis/docs/network')
| -rw-r--r-- | www/lib/vis/docs/network/configure.html | 193 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/edges.html | 712 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/groups.html | 177 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/index.html | 1644 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/interaction.html | 172 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/layout.html | 169 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/manipulation.html | 204 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/nodes.html | 742 | ||||
| -rw-r--r-- | www/lib/vis/docs/network/physics.html | 224 |
9 files changed, 0 insertions, 4237 deletions
diff --git a/www/lib/vis/docs/network/configure.html b/www/lib/vis/docs/network/configure.html deleted file mode 100644 index 98be9e16..00000000 --- a/www/lib/vis/docs/network/configure.html +++ /dev/null @@ -1,193 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - - <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 - Configure documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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/toggleTable.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> - - <style> - - </style> -</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="http://www.visjs.org/index.html#modules">Modules</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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - configure</h1> - - <p>Handles the HTML part of the canvas.</p> - <h3>Options</h3> - <p>The options for the canvas have to be contained in an object titled 'configure'.</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 = { - configure: { - enabled: true, - filter: 'nodes,edges', - container: undefined, - showButton: true - } -} - -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 = { - configure: 'nodes,edges' -} - -network.setOptions(options); -</pre> - - <p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or - <code>Boolean</code>. These will do the same as the filter option described below.</p> - <table class="options"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr> - <td>enabled</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true. - </td> - </tr> - <tr> - <td>filter</td> - <td>String, Array, Boolean, Function</td> - <td><code>true</code></td> - <td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any - combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, - selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an - array of strings, any of the previously mentioned fields are accepted. <br><br> - When supplying a function, you receive two arguments. The option and the path of the option within the options object. If it returns true, the options will be shown in the configurator. Example: - <pre class="prettyprint lang-js"> -function (option, path) { - return path.indexOf('physics') !== -1; -}</pre> - This only shows the physics options. - </td> - </tr> - <tr> - <td>container</td> - <td>DOM element</td> - <td><code>undefined</code></td> - <td>This allows you to put the configure list in another HTML container than below the network.</td> - </tr> - <tr> - <td>showButton</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>Show the generate options button at the bottom of the configurator.</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script> diff --git a/www/lib/vis/docs/network/edges.html b/www/lib/vis/docs/network/edges.html deleted file mode 100644 index 423f9a45..00000000 --- a/www/lib/vis/docs/network/edges.html +++ /dev/null @@ -1,712 +0,0 @@ -<!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 - Edges documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.css" rel="stylesheet"> - - <link href="../css/style.css" rel="stylesheet"> - - <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> - - <!-- 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.type { - width: 90px; - } - </style> - <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="http://www.visjs.org/index.html#modules">Modules</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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - edges</h1> - - <p>Handles the creation and deletion of edges and contains the global edge options and styles.</p> - <h3>Options</h3> - - <p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined - in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p> - <p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>null</code>, - it will revert back to the default value.</i></b> - </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 = { - edges:{ - arrows: { - to: {enabled: false, scaleFactor:1, type:'arrow'}, - middle: {enabled: false, scaleFactor:1, type:'arrow'}, - from: {enabled: false, scaleFactor:1, type:'arrow'} - }, - arrowStrikethrough: true, - color: { - color:'#848484', - highlight:'#848484', - hover: '#848484', - inherit: 'from', - opacity:1.0 - }, - dashes: false, - font: { - color: '#343434', - size: 14, // px - face: 'arial', - background: 'none', - strokeWidth: 2, // px - strokeColor: '#ffffff', - align:'horizontal' - }, - hidden: false, - hoverWidth: 1.5, - label: undefined, - labelHighlightBold: true, - length: undefined, - physics: true, - scaling:{ - min: 1, - max: 15, - label: { - enabled: true, - min: 14, - max: 30, - maxVisible: 30, - drawThreshold: 5 - }, - customScalingFunction: function (min,max,total,value) { - if (max === min) { - return 0.5; - } - else { - var scale = 1 / (max - min); - return Math.max(0,(value - min)*scale); - } - } - }, - selectionWidth: 1, - selfReferenceSize:20, - shadow:{ - enabled: false, - color: 'rgba(0,0,0,0.5)', - size:10, - x:5, - y:5 - }, - smooth: { - enabled: true, - type: "dynamic", - roundness: 0.5 - }, - title:undefined, - width: 1, - value: undefined - } -} - -network.setOptions(options); -</pre> - -<pre class="prettyprint lang-js options top hidden" id="shortOptions"> -// here all options that have shorthand notations are shown. -var options = { - edges:{ - arrows: 'to, from', - color: 'red', - font: '12px arial #ff0000', - scaling:{ - label: true, - }, - shadow: true, - smooth: true, - } -} - -network.setOptions(options); -</pre> - - <p>These options can also be set per individual edge.</p> - <table class="options" id="optionTable"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);"> - <td><span parent="arrows" class="right-caret"></span> arrows</td> - <td>Object or String</td> - <td><code>undefined</code></td> - <td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from, - middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you - want to control the size of the arrowheads, you can supply an object. - </td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent">arrows.to</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default - settings. To customize the size of the arrow, supply an object. - </td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent2">arrows.to.enabled</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set, - enabled will be set to true. - </td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent2">arrows.to.scaleFactor</td> - <td>Number</td> - <td><code>1</code></td> - <td>The scale factor allows you to change the size of the arrowhead.</td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent2">arrows.to.type</td> - <td>String</td> - <td><code>arrow</code></td> - <td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent">arrows.middle</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td> - </tr> - <tr parent="arrows" class="hidden"> - <td class="indent">arrows.from</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td> - </tr> - <tr> - <td class="indent">arrowStrikethrough</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>When false, the edge stops at the arrow. This can be useful if you have thick lines and you want the arrow to end in a point. Middle arrows are not affected by this.</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);"> - <td><span parent="color" class="right-caret"></span> color</td> - <td>Object or String</td> - <td><code>Object</code></td> - <td>The color object contains the color information of the edge in every situation. When the edge only needs - a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or - <code>'red'</code> can be supplied instead of an object. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.color</td> - <td>String</td> - <td><code>'#848484'</code></td> - <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is - enabled in the interaction module)</i>. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.highlight</td> - <td>String</td> - <td><code>'#848484'</code></td> - <td>The color the edge when it is selected.</td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.hover</td> - <td>String</td> - <td><code>'#848484'</code></td> - <td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction - module)</i>. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.inherit</td> - <td>String or Boolean</td> - <td><code>'from'</code></td> - <td><i>When color, highlight or hover are defined, inherit is set to false!</i> - <br><br>Supported options are: <code>true, false, 'from','to','both'</code>. - <br><br>The default value is 'from' which does the same as true: the edge will inherit the color from - the border of the node on the 'from' side. - <br><br>When set to 'to', the border color from the 'to' node will be used. - <br><br>When set to 'both', the color will fade from the from color to the to color. <b>'both' is - computationally intensive</b> because the gradient is recomputed every redraw. This is required - because the angles change when the nodes move. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.opacity</td> - <td>Number</td> - <td><code>1.0</code></td> - <td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity - option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed - range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance - impact is not too big. - </td> - </tr> - <tr> - <td>dashes</td> - <td>Array or Boolean</td> - <td><code>false</code></td> - <td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array. - Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is - repeated until the distance is filled. - <i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);"> - <td><span parent="font" class="right-caret"></span> font</td> - <td>Object or String</td> - <td><code>false</code></td> - <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face - color'</code> for example: <code>'14px arial red'</code>. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.color</td> - <td>String</td> - <td><code>'#343434'</code></td> - <td>Color of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.size</td> - <td>Number</td> - <td><code>14</code></td> - <td>Size of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.face</td> - <td>String</td> - <td><code>'arial'</code></td> - <td>Font face (or font family) of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.background</td> - <td>String</td> - <td><code>undefined</code></td> - <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind - the label in the supplied color. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.strokeWidth</td> - <td>Number</td> - <td><code>2</code></td> - <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value - higher than 0 is supplied, the stroke will be drawn. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.strokeColor</td> - <td>String</td> - <td><code>'#ffffff'</code></td> - <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.align</td> - <td>String</td> - <td><code>'horizontal'</code></td> - <td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the - label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally, - regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen, - the label will align itself according to the edge. - </td> - </tr> - <tr> - <td>from</td> - <td>Number or String</td> - <td></td> - <td>Edges are between two nodes, one to and one from. This is where you define the from node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td> - </tr> - <tr> - <td>hidden</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td> - </tr> - <tr> - <td>hoverWidth</td> - <td>Number or Function</td> - <td><code>0.5</code></td> - <td>Assuming the hover behaviour is enabled in the <a href="./interaction.html">interaction module</a>, the - hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is - supplied, this number will be <b>added</b> to the width. - Because the width can be altered by the value and the scaling functions, a constant multiplier or added - value may not give the best results. To solve this, you can supply a function. Example: - -<pre class="code"> -var options: { - edges: { - hoverWidth: function (width) {return width+1;} - } -} -</pre> - It receives the <code>Number width</code> of the edge. In this simple example we add 1 to the width. You - can taylor the logic in the function as long as it returns a <code>Number</code>. - </td> - </tr> - - <tr> - <td>id</td> - <td>String</td> - <td><code>undefined</code></td> - <td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge. This naturally only applies to individual edges.</td> - </tr> - <tr> - <td>label</td> - <td>String</td> - <td><code>undefined</code></td> - <td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td> - </tr> - <tr> - <td>labelHighlightBold</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>Determines whether or not the label becomes bold when the edge is selected.</td> - </tr> - <tr> - <td>length</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>The physics simulation gives edges a spring length. This value can override the length of the spring in - rest. - </td> - </tr> - <tr> - <td>physics</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);"> - <td><span parent="scaling" class="right-caret"></span> scaling</td> - <td>Object</td> - <td><code>Object</code></td> - <td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the - properties in this object. Keep in mind that when using scaling, the <code>width</code> option is - neglected. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.min</td> - <td>Number</td> - <td><code>1</code></td> - <td>If edges have a value, their widths are determined by the value, the scaling function and the min max - values. The min value is the minimum allowed value. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.max</td> - <td>Number</td> - <td><code>15</code></td> - <td>This is the maximum allowed width when the edges are scaled using the value option.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.label</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When false, the label is not allowed to scale with the edge. If true it will scale using default - settigns. For further customization, you can supply an object. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.enabled</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>Toggle the scaling of the label on or off. 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="scaling" class="hidden"> - <td class="indent2">scaling.label.min</td> - <td>Number</td> - <td><code>14</code></td> - <td>The minimum font-size used for labels when scaling.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.max</td> - <td>Number</td> - <td><code>30</code></td> - <td>The maximum font-size used for labels when scaling.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.maxVisible</td> - <td>Number</td> - <td><code>30</code></td> - <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this - option. If set to 30, the font will never look larger than size 30 zoomed at 100%. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.drawThreshold</td> - <td>Number</td> - <td><code>5</code></td> - <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. - When using font scaling, you can use this together with the maxVisible to first show labels of important - edges when zoomed out and only show the rest when zooming in. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.customScalingFunction</td> - <td>Function</td> - <td>in description</td> - <td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled - based on their values. The default function is: -<pre> -function (min,max,total,value) { - if (max === min) { - return 0.5; - } - else { - var scale = 1 / (max - min); - return Math.max(0,(value - min)*scale); - } -} -</pre> - The function receives the minimum value of the set, the maximum value, the total sum of all values and - finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The - nodes and edges then calculate their size as follows: -<pre> -var scale = customScalingFunction(min,max,total,value); -var diff = maxWidth - minWidth; -myWidth = minWidth + diff * scale; -</pre> - Please note: <code>maxWidth</code> and <code>minWidth</code> are the values <code>scaling.max</code> - and <code>scaling.min</code> provided in the options. - </td> - </tr> - <tr> - <td>selectionWidth</td> - <td>Number or Function</td> - <td><code>1</code></td> - <td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied, - this number will be <b>added</b> to the width. - Because the width can be altered by the value and the scaling functions, a constant multiplier or added - value may not give the best results. To solve this, you can supply a function. Example: - -<pre class="code"> -var options: { - edges: { - selectionWidth: function (width) {return width*2;} - } -} -</pre> - It receives the <code>Number width</code> of the edge. In this simple example multiply the width by 2. - You can taylor the logic in the function as long as it returns a <code>Number</code>. - </td> - </tr> - <tr> - <td>selfReferenceSize</td> - <td>Number</td> - <td><code>false</code></td> - <td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);"> - <td><span parent="shadow" class="right-caret"></span> shadow</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying - an object. - </td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.enabled</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>Toggle the casting of shadows. 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="shadow" class="hidden"> - <td class="indent">shadow.color</td> - <td>String</td> - <td><code>'rgba(0,0,0,0.5)'</code></td> - <td>The color size of the shadow as a string. Supported formats are 'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.size</td> - <td>Number</td> - <td><code>10</code></td> - <td>The blur size of the shadow.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.x</td> - <td>Number</td> - <td><code>5</code></td> - <td>The x offset.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.y</td> - <td>Number</td> - <td><code>5</code></td> - <td>The y offset.</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','smooth', this);"> - <td><span parent="smooth" class="right-caret"></span> smooth</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than - that of straight curves but it looks better. - There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves - have an invisible support node that takes part in the physics simulation. If you have a lot of edges, - you may want to consider picking a different type of smooth curves then dynamic for better performance. - </td> - </tr> - <tr parent="smooth" class="hidden"> - <td class="indent">smooth.enabled</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this - object are set, this option will be set to true. - </td> - </tr> - <tr parent="smooth" class="hidden"> - <td class="indent">smooth.type</td> - <td>String</td> - <td><code>'dynamic'</code></td> - <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', - 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'</code>. Take a look at our example 26 to see what these look like - and pick the one that you like best! - <br><br> - When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the - physics simulation. - </td> - </tr> - <tr parent="smooth" class="hidden"> - <td class="indent">smooth.forceDirection</td> - <td>String or Boolean</td> - <td><code>false</code></td> - <td>Accepted options: <code>['horizontal', 'vertical', 'none']</code>. This options is only used with the cubicBezier curves. When true, horizontal is chosen, when false, - the direction that is larger (x distance between nodes vs y distance between nodes) is used. If the x distance is larger, horizontal. This is ment to be used with hierarchical layouts. - </td> - </tr> - <tr parent="smooth" class="hidden"> - <td class="indent">smooth.roundness</td> - <td>Number</td> - <td><code>0.5</code></td> - <td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic. - </td> - </tr> - <tr> - <td>title</td> - <td>String</td> - <td><code>undefined</code></td> - <td>The title is shown in a pop-up when the mouse moves over the edge.</td> - </tr> - <tr> - <td>to</td> - <td>Number or String</td> - <td></td> - <td>Edges are between two nodes, one to and one from. This is where you define the to node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td> - </tr> - <tr> - <td>value</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>When a value is set, the edges' width will be scaled using the options in the scaling object defined - above. - </td> - </tr> - <tr> - <td>width</td> - <td>Number</td> - <td><code>1</code></td> - <td>The width of the edge. If value is set, this is not used.</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script> diff --git a/www/lib/vis/docs/network/groups.html b/www/lib/vis/docs/network/groups.html deleted file mode 100644 index caa8d178..00000000 --- a/www/lib/vis/docs/network/groups.html +++ /dev/null @@ -1,177 +0,0 @@ -<!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 - Groups documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.css" rel="stylesheet"> - - <link href="../css/style.css" rel="stylesheet"> - - <link href="../css/prettify.css" type="text/css" rel="stylesheet" /> - <script type="text/javascript" src="../js/toggleTable.js"></script> - <script type="text/javascript" src="../js/googleAnalytics.js"></script> - <script type="text/javascript" src="../js/prettify/prettify.js"></script> - - <!-- 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> - - </style> -</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="http://www.visjs.org/index.html#modules">Modules</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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - groups</h1> - - <p>Handles the group styling.</p> - <h3>Options</h3> - - <p>The options for the canvas have to be contained in an object titled 'groups'.</p> - <p>Click on the options shown 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="#">options shown</a></li> - </ul> - <br> -<pre class="prettyprint lang-js options hidden" id="fullOptions"> -var options = { - groups:{ - useDefaultGroups: true, - myGroupId:{ - /*node options*/ - } - } -} - -network.setOptions(options); -</pre> - <p>All of the individual options are explained here:</p> - <table class="options"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr> - <td>useDefaultGroups</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>If your nodes have groups defined that are not in the Groups module, the module loops over the groups it - does have, allocating one for each unknown group. When all are used, it goes back to the first group. By - setting this to false, the default groups will not be used in this cycle. - </td> - </tr> - <tr> - <td>group*</td> - <td>Object</td> - <td><code></code></td> - <td> - You can add multiple groups containing styling information that applies to a certain subset of groups. - All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here - (you're not going to set the same id or x,y position for a group of nodes). - Example: -<pre class="prettyprint lang-js options"> -var nodes = [ - {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"} -] - -var options = { - groups: { - myGroup: {color:{background:'red'}, borderWidth:3} - } -} -</pre> - *) the option is not called group, as shown by the example but can by any custom id, except for - 'useDefaultGroups'. - </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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script>
\ No newline at end of file diff --git a/www/lib/vis/docs/network/index.html b/www/lib/vis/docs/network/index.html deleted file mode 100644 index cfd03d64..00000000 --- a/www/lib/vis/docs/network/index.html +++ /dev/null @@ -1,1644 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <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=""> - <title>vis.js - Network documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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> - - <style> - tr.subHeader { - font-weight: bold; - font-style: italic; - } - - tr.subHeader td { - padding-top: 30px; - } - - td.midMethods { - width: 150px; - background-color: #ffffff; - border: 1px solid #dddddd; - } - - tr.visible td { - padding: 10px; - } - </style> - - <script> - function toggleGettingStarted(aThis) { - var gettingStartedDiv = document.getElementById('gettingStarted'); - if (aThis.innerHTML.indexOf("Show") !== -1) { - gettingStartedDiv.className = ''; - aThis.innerHTML = 'Hide the getting started again.'; - } - else { - gettingStartedDiv.className = 'hidden'; - aThis.innerHTML = 'Show the getting started!'; - } - } - </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="http://www.visjs.org/index.html#modules">Modules</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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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</h1> - - <p>Network is a visualization to display networks and networks consisting of nodes and edges. The visualization - is easy to use and supports custom shapes, styles, colors, sizes, images, and more. - - The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To - handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.</p> - - <p>As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules - have their own docs, options, methods and events which you can access - by clicking on the modules in the list below.</p> - - <a class="btn btn-primary" role="button" onclick="toggleGettingStarted(this)">Show the getting started!</a> - <div id="gettingStarted" class="hidden"> - <h3>Creating a Network</h3> - - <p> - Creating a vis network is easy. <a href="http://visjs.org/#download_install" target="_blank">It requires you to - include the vis.js and css files which you can get here</a>. If you have these - added to your application, you will need to specify your nodes and edges. You can use DOT language or export - nodes and edges from Gephi if you'd like but we will do it without these for now. - For more information on this click the tabs below. You can also use the vis.DataSets for dynamic data binding, - for instance, changing the color, label or any option after you have initialized the network. - <br><br> - Once you have the data, all you need is a container div to tell vis where to put your network. Additionally you - can use an options object to customize many aspects of the network. In code this - looks like this:</p> - - <pre class="prettyprint lang-html options"> -<html> -<head> - <script type="text/javascript" src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <style type="text/css"> - #mynetwork { - width: 600px; - height: 400px; - border: 1px solid lightgray; - } - </style> -</head> -<body> -<div id="mynetwork"></div> - -<script type="text/javascript"> - // create an array with nodes - var nodes = new vis.DataSet([ - {id: 1, label: 'Node 1'}, - {id: 2, label: 'Node 2'}, - {id: 3, label: 'Node 3'}, - {id: 4, label: 'Node 4'}, - {id: 5, label: 'Node 5'} - ]); - - // create an array with edges - var edges = new vis.DataSet([ - {from: 1, to: 3}, - {from: 1, to: 2}, - {from: 2, to: 4}, - {from: 2, to: 5} - ]); - - // create a network - var container = document.getElementById('mynetwork'); - - // provide the data in the vis format - var data = { - nodes: nodes, - edges: edges - }; - var options = {}; - - // initialize your network! - var network = new vis.Network(container, data, options); -</script> -</body> -</html> -</pre> - <p><a href="http://visjs.org/examples/network/basicUsage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p> - - <br> - </div> - - <h2 id="Contents">Contents</h2> - <ul> - <li><a href="#modules">Modules</a></li> - <li><a href="#options">Options</a></li> - <li><a href="#methods">Method Reference</a> - <ul> - <li><a href="#methodGlobal">Global</a></li> - <li><a href="#methodCanvas">Canvas</a></li> - <li><a href="#methodClustering">Clustering</a></li> - <li><a href="#methodLayout">Layout</a></li> - <li><a href="#methodManipulation">Manipulation</a></li> - <li><a href="#methodInformation">Information</a></li> - <li><a href="#methodPhysics">Physics</a></li> - <li><a href="#methodSelection">Selection</a></li> - <li><a href="#methodViewport">Viewport</a></li> - <li><a href="#methodConfigurator">Configurator</a></li> - </ul> - </li> - <li><a href="#Events">Events</a></li> - <li><a href="#importing_data">Importing Data</a> - <ul> - <li><a href="#importGephi">from Gephi</a></li> - <li><a href="#importDot">from DOT language</a></li> - </ul> - </li> - </ul> - - <h2 id="modules">Modules</h2> - <table class="modules"> - <tr> - <td width="120px"><a href="./configure.html">configure</a></td> - <td>Generates an interactive option editor with filtering.</td> - </tr> - <tr> - <td><a href="./edges.html">edges</a></td> - <td>Handles the creation and deletion of edges and contains the global edge options and styles.</td> - </tr> - <tr> - <td><a href="./groups.html">groups</a></td> - <td>Contains the groups and some options on how to handle nodes with non-existing groups.</td> - </tr> - <tr> - <td><a href="./interaction.html">interaction</a></td> - <td>Used for all user interaction with the network. Handles mouse and touch events and selection as well as - the navigation buttons and the popups. - </td> - </tr> - <tr> - <td><a href="./layout.html">layout</a></td> - <td>Governs the initial and hierarchical positioning.</td> - </tr> - <tr> - <td><a href="./manipulation.html">manipulation</a></td> - <td>Supplies an API and optional GUI to alter the data in the network.</td> - </tr> - <tr> - <td><a href="./nodes.html">nodes</a></td> - <td>Handles the creation and deletion of nodes and contains the global node options and styles.</td> - </tr> - <tr> - <td><a href="./physics.html">physics</a></td> - <td>Does all the simulation moving the nodes and edges to their final positions, also governs - stabilization. - </td> - </tr> - - </table> - - <br> - - <div id="optionsDiv"> - <h2 id="options">Options</h2> -<pre class="prettyprint lang-js options"> -var options = { - autoResize: true, - height: '100%', - width: '100%' - locale: 'en', - locales: locales, - clickToUse: false, - configure: {...}, // defined in the configure module. - edges: {...}, // defined in the edges module. - nodes: {...}, // defined in the nodes module. - groups: {...}, // defined in the groups module. - layout: {...}, // defined in the layout module. - interaction: {...}, // defined in the interaction module. - manipulation: {...}, // defined in the manipulation module. - physics: {...}, // defined in the physics module. -} - -network.setOptions(options); -</pre> - <p>The individual options are explained below. The ones referring to modules are explained in the corresponding - module.</p> - <table class="options"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr><td id="event_autoResize">autoResize</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>If true, the Network will automatically detect when its container is resized, and redraw itself - accordingly. If false, the Network can be forced to repaint after its container has been resized - using the function redraw() and setSize(). - </td> - </tr> - <tr><td id="event_width">width</td> - <td>String</td> - <td><code>'100%'</code></td> - <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> - </tr> - <tr><td id="event_height">height</td> - <td>String</td> - <td><code>'100%'</code></td> - <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td> - </tr> - <tr><td id="event_locale">locale</td> - <td>String</td> - <td><code>'en'</code></td> - <td>Select the locale. By default, the language is English. - </td> - </tr> - <tr><td id="event_locales">locales</td> - <td>Object</td> - <td>defaultLocales</td> - <td>Locales object. By default - <code>'en'</code>, - <code>'de'</code>, - <code>'es'</code>, - <code>'it'</code>, - <code>'nl'</code> - <code>'pt-br'</code>, - <code>'ru'</code> - are supported. Take a look at the - <a href="#locales" data-scroll="" data-options="{ "easing": "easeInCubic" }">locales section below</a> - for more explaination on how to customize this. - </td> - </tr> - <tr><td id="event_clickToUse">clickToUse</td> - <td>Boolean</td> - <td>false</td> - <td>When a Network is configured to be <code>clickToUse</code>, it will react to mouse and touch events only when active. When active, a blue shadow border is displayed around the Network. The network is set active by clicking on it, and is changed to inactive again by clicking outside the Network or by pressing the ESC key. - </td> - </tr> - <tr><td id="event_configure">configure</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./configure.html">configure module</a>. - </td> - </tr> - <tr><td id="event_edges">edges</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./edges.html">edges module</a>. - </td> - </tr> - <tr><td id="event_nodes">nodes</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./nodes.html">nodes module</a>. - </td> - </tr> - <tr><td id="event_groups">groups</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./groups.html">groups module</a>. - </td> - </tr> - <tr><td id="event_layout">layout</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./layout.html">layout module</a>. - </td> - </tr> - <tr><td id="event_interaction">interaction</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./interaction.html">interaction module</a>. - </td> - </tr> - <tr><td id="event_manipulation">manipulation</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./manipulation.html">manipulation module</a>. - </td> - </tr> - <tr><td id="event_physics">physics</td> - <td>Object</td> - <td>Object</td> - <td>All options in this object are explained in the <a href="./physics.html">physics module</a>. - </td> - </tr> - </table> - - <br> - <br> - <h4 id="locales">Custom locales</h4> - - <p>The locales object has the following format:</p> - <pre class="prettyprint lang-js"> -var locales = { - en: { - edit: 'Edit', - del: 'Delete selected', - back: 'Back', - addNode: 'Add Node', - addEdge: 'Add Edge', - editNode: 'Edit Node', - editEdge: 'Edit Edge', - addDescription: 'Click in an empty space to place a new node.', - edgeDescription: 'Click on a node and drag the edge to another node to connect them.', - editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.', - createEdgeError: 'Cannot link edges to a cluster.', - deleteClusterError: 'Clusters cannot be deleted.', - editClusterError: 'Clusters cannot be edited.' - } -}</pre> - <p>If you want to define your own locale, you can change the key ('en' here) and change all the strings. You can - then use your new key in the locale option.</p> - </div> - <br /><hr /> - <div id="methodsDiv"> - <h2 id="methods">Methods</h2> - - <p>This is a list of all the methods in the public API. They have been grouped by category, which correspond to - the - modules listed above.</p> - <table class="methods-collapsable" id="methodTable"> - <tr id="methodGlobal" class="subHeader"> - <td colspan="2">Global methods for the network.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','destroy', this);"> - <td colspan="2"><span parent="destroy" class="right-caret" id="method_destroy"></span> destroy()</td> - </tr> - <tr class="hidden" parent="destroy"> - <td class="midMethods">Returns: none</td> - <td>Remove the network from the DOM and remove all Hammer bindings and references.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','setData', this);"> - <td colspan="2"><span parent="setData" class="right-caret" id="method_setData"></span> setData({<code><i>nodes: vis - DataSet/Array</i></code>,<code><i>edges: vis - DataSet/Array</i></code>}) - </td> - </tr> - <tr class="hidden" parent="setData"> - <td class="midMethods">Returns: none</td> - <td>Override all the data in the network. If stabilization is enabled in the <a href="physics.html">physics - module</a>, the network will stabilize again. This method is also performed when first initializing - the - network. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','setOptions', this);"> - <td colspan="2"><span parent="setOptions" class="right-caret" id="method_setOptions"></span> setOptions(<code>Object - options</code>) - </td> - </tr> - <tr class="hidden" parent="setOptions"> - <td class="midMethods">Returns: none</td> - <td>Set the options. All available options can be found in the modules above. Each module requires it's - own - container with the module name to contain its options. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','onEvent', this);"> - <td colspan="2"><span parent="onEvent" class="right-caret" id="method_on"></span> on(<code>String event name, Function callback</code>) - </td> - </tr> - <tr class="hidden" parent="onEvent"> - <td class="midMethods">Returns: none</td> - <td>Set an event listener. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','offEvent', this);"> - <td colspan="2"><span parent="offEvent" class="right-caret" id="method_off"></span> off(<code>String event name, Function callback</code>) - </td> - </tr> - <tr class="hidden" parent="offEvent"> - <td class="midMethods">Returns: none</td> - <td>Remove an event listener. The function you supply has to be the exact same as the one you used in the on function. If no function is supplied, all listeners will be removed. Look at the event section of the documentation for more information. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','onceEvent', this);"> - <td colspan="2"><span parent="onceEvent" class="right-caret" id="method_once"></span> once(<code>String event name, Function callback</code>) - </td> - </tr> - <tr class="hidden" parent="onceEvent"> - <td class="midMethods">Returns: none</td> - <td>Set an event listener only once. After it has taken place, the event listener will be removed. Depending on the type of event you get different parameters for the callback function. Look at the event section of the documentation for more information. - </td> - </tr> - - - <tr id="methodCanvas" class="subHeader"> - <td colspan="2">Methods related to the canvas.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','canvasToDOM', this);"> - <td colspan="2"><span parent="canvasToDOM" class="right-caret" id="method_canvasToDOM"></span> canvasToDOM({<code><i>x: - Number</i></code>,<code><i>y: - Number</i></code>}) - </td> - </tr> - <tr class="hidden" parent="canvasToDOM"> - <td class="midMethods">Returns: Object</td> - <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the - form of - <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','DOMtoCanvas', this);"> - <td colspan="2"><span parent="DOMtoCanvas" class="right-caret" id="method_DOMtoCanvas"></span> DOMtoCanvas({<code><i>x: - Number</i></code>,<code><i>y: - Number</i></code>}) - </td> - </tr> - <tr class="hidden" parent="DOMtoCanvas"> - <td class="midMethods">Returns: Object</td> - <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the - form of - <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','redraw', this);"> - <td colspan="2"><span parent="redraw" class="right-caret" id="method_redraw"></span> redraw()</td> - </tr> - <tr class="hidden" parent="redraw"> - <td class="midMethods">Returns: none</td> - <td>Redraw the network.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSize', this);"> - <td colspan="2"><span parent="setSize" class="right-caret" id="method_setSize"></span> setSize(<code><i>String - width</i></code>,<code><i>String - height</i></code>) - </td> - </tr> - <tr class="hidden" parent="setSize"> - <td class="midMethods">Returns: none</td> - <td>Set the size of the canvas. This is automatically done on a window resize.</td> - </tr> - - <tr id="methodClustering" class="subHeader"> - <td colspan="2">Clustering</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','cluster', this);"> - <td colspan="2"><span parent="cluster" class="right-caret" id="method_cluster"></span> cluster( - <code>Object options</code>) - </td> - </tr> - <tr class="hidden" parent="cluster"> - <td class="midMethods">Returns: none</td> - <td>The options object is explained in full <a data-scroll="" - data-options="{ "easing": "easeInCubic" }" - href="#optionsObject">below</a>. The joinCondition - function - is presented with all nodes. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByConnection', this);"> - <td colspan="2"><span parent="clusterByConnection" class="right-caret" id="method_clusterByConnection"></span> clusterByConnection( - <code>String nodeId</code>, - <code>[Object options]</code> - ) - </td> - </tr> - <tr class="hidden" parent="clusterByConnection"> - <td class="midMethods">Returns: none</td> - <td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The - behaviour can be customized by proving the options object. All options of this object are explained - <a - data-scroll="" data-options="{ "easing": "easeInCubic" }" - href="#optionsObject">below</a>. The joinCondition is only presented with the connected - nodes. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);"> - <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_clusterByHubsize"></span> clusterByHubsize( - <code>[Number hubsize]</code>, - <code>[Object options]</code>) - </td> - </tr> - <tr class="hidden" parent="clusterByHubsize"> - <td class="midMethods">Returns: none</td> - <td>This method checks all nodes in the network and those with a equal or higher amount of edges than - specified with the <code>hubsize</code> qualify. If a hubsize is not defined, the hubsize will be determined as the average - value plus two standard deviations. <br><br> - - For all qualifying nodes, clusterByConnection is performed on each of them. - The options object is described for <code>clusterByConnection</code> and does the same here. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterOutliers', this);"> - <td colspan="2"><span parent="clusterOutliers" class="right-caret" id="method_clusterOutliers"></span> clusterOutliers( - <code>[Object options]</code>) - </tr> - <tr class="hidden" parent="clusterOutliers"> - <td class="midMethods">Returns: none</td> - <td>This method will cluster all nodes with 1 edge with their respective connected node. - The options object is explained in full <a data-scroll="" data-options="{ "easing": "easeInCubic" }" href="#optionsObject">below</a>. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);"> - <td colspan="2"><span parent="findNode" class="right-caret" id="method_findNode"></span> findNode( - <code>String nodeId</code>) - </tr> - <tr class="hidden" parent="findNode"> - <td class="midMethods">Returns: Array</td> - <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of - nodeIds - showing where the node is. <br><br> Example: - cluster 'A' contains cluster 'B', - cluster 'B' contains cluster 'C', - cluster 'C' contains node 'fred'. - <code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getClusteredEdges', this);"> - <td colspan="2"><span parent="getClusteredEdges" class="right-caret" id="method_getClusteredEdges"></span> getClusteredEdges( - <code>String baseEdgeId</code>) - </tr> - <tr class="hidden" parent="getClusteredEdges"> - <td class="midMethods">Returns: Array</td> - <td>Similiar to <code>findNode</code> in that it returns all the edge ids that were created from the provided edge during clustering - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdge', this);"> - <td colspan="2"><span parent="getBaseEdge" class="right-caret" id="method_getBaseEdge"></span> getBaseEdge( - <code>String clusteredEdgeId</code>) - </tr> - <tr class="hidden" parent="getBaseEdge"> - <td class="midMethods">Returns: Value</td> - <td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/> - ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);"> - <td colspan="2"><span parent="updateEdge" class="right-caret" id="method_updateEdge"></span> updateEdge( - <code>String startEdgeId, Object options</code>) - </tr> - <tr class="hidden" parent="updateEdge"> - <td class="midMethods">Returns: none</td> - <td>Visible edges between clustered nodes are not the same edge as the ones provided in <code>data.edges</code> passed on <code>network</code> creation<br/> - With each layer of clustering, copies of the edges between clusters are created and the previous edges are hidden, until the cluster is opened.<br/> - This method takes an edgeId (ie. a base edgeId from <data>data.edges</code>) and applys the options to it and any edges that were created from it while clustering.<br><br> Example: - <code>network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'});</code><br/> - This would turn the base edge and any subsequent edges red, so when opening clusters the edges will all be the same color. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateClusteredNode', this);"> - <td colspan="2"><span parent="updateClusteredNode" class="right-caret" id="method_updateClusteredNode"></span> updateClusteredNode( - <code>String clusteredNodeId, Object options</code>) - </tr> - <tr class="hidden" parent="updateClusteredNode"> - <td class="midMethods">Returns: none</td> - <td>Clustered Nodes when created are not contained in the original <code>data.nodes</code> passed on <code>network</code> creation<br/> - This method updates the cluster node.<br><br> Example: - <code>network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});</code> - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','isCluster', this);"> - <td colspan="2"><span parent="isCluster" class="right-caret" id="method_isCluster"></span> isCluster( - <code>String nodeId</code>) - </tr> - <tr class="hidden" parent="isCluster"> - <td class="midMethods">Returns: Boolean</td> - <td>Returns true if the node whose ID has been supplied is a cluster.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodesInCluster', this);"> - <td colspan="2"><span parent="getNodesInCluster" class="right-caret" id="method_getNodesInCluster"></span> getNodesInCluster( - <code>String clusterNodeId</code>) - </tr> - <tr class="hidden" parent="getNodesInCluster"> - <td class="midMethods">Returns: Array</td> - <td>Returns an array of all nodeIds of the nodes that would be released if you open the cluster. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','openCluster', this);"> - <td colspan="2"><span parent="openCluster" class="right-caret" id="method_openCluster"></span> openCluster( - <code>String nodeId, Object options</code>) - </tr> - <tr class="hidden" parent="openCluster"> - <td class="midMethods">Returns: none</td> - <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster - edges. The options object is optional and currently supports one option, releaseFunction, which is a function that can be used to manually - position the nodes after the cluster is opened. <br> -<pre class="code"> -function releaseFunction (clusterPosition, containedNodesPositions) { - var newPositions = {}; - // clusterPosition = {x:clusterX, y:clusterY}; - // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....} - newPositions[nodeId] = {x:newPosX, y:newPosY}; - return newPositions; -}</pre> - The containedNodesPositions contain the positions of the nodes in the cluster at the moment they were clustered. - This function is expected to return the newPositions, which can be the containedNodesPositions (altered) or a new object. This has to be an object with keys equal - to the nodeIds that exist in the containedNodesPositions and an <code>{x:x,y:y}</code> position object. <br><br> - - For all nodeIds not listed in this returned object, we will position them at the location of the cluster. This is also the default behaviour when no releaseFunction is defined. - </td> - </tr> - - <tr id="methodLayout" class="subHeader"> - <td colspan="2">Layout</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSeed', this);"> - <td colspan="2"><span parent="getSeed" class="right-caret" id="method_getSeed"></span> getSeed()</td> - </tr> - <tr class="hidden" parent="clusterByHubsize"> - </tr> - <tr class="hidden" parent="getSeed"> - <td class="midMethods">Returns: Number</td> - <td>If you like the layout of your network and would like it to start in the same way next time, ask for - the - seed using this method and put it in the <code>layout.randomSeed</code> option. - </td> - </tr> - - - <tr id="methodManipulation" class="subHeader"> - <td colspan="2">Manipulation methods to use the manipulation system without GUI.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','enableEditMode', this);"> - <td colspan="2"><span parent="enableEditMode" class="right-caret" id="method_enableEditMode"></span> enableEditMode()</td> - </tr> - <tr class="hidden" parent="enableEditMode"> - <td class="midMethods">Returns: none</td> - <td>Programatically enable the edit mode. Similar effect to pressing the edit button.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','disableEditMode', this);"> - <td colspan="2"><span parent="disableEditMode" class="right-caret" id="method_disableEditMode"></span> disableEditMode()</td> - </tr> - <tr class="hidden" parent="disableEditMode"> - <td class="midMethods">Returns: none</td> - <td>Programatically disable the edit mode. Similar effect to pressing the close icon (small cross in the - corner of the toolbar). - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','addNodeMode', this);"> - <td colspan="2"><span parent="addNodeMode" class="right-caret" id="method_addNodeMode"></span> addNodeMode()</td> - </tr> - <tr class="hidden" parent="addNodeMode"> - <td class="midMethods">Returns: none</td> - <td>Go into addNode mode. Having edit mode or manipulation enabled is not required. To get out of this - mode, - call <code>disableEditMode()</code>. The callback functions defined in <code>handlerFunctions</code> - still apply. To use these methods without having the manipulation GUI, make sure you set - <code>enabled</code> to false. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','editNode', this);"> - <td colspan="2"><span parent="editNode" class="right-caret" id="method_editNode"></span> editNode()</td> - </tr> - <tr class="hidden" parent="editNode"> - <td class="midMethods">Returns: none</td> - <td>Edit the selected node. The explaination from <code>addNodeMode</code> applies here as well.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','addEdgeMode', this);"> - <td colspan="2"><span parent="addEdgeMode" class="right-caret" id="method_addEdgeMode"></span> addEdgeMode()</td> - </tr> - <tr class="hidden" parent="addEdgeMode"> - <td class="midMethods">Returns: none</td> - <td>Go into addEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','editEdgeMode', this);"> - <td colspan="2"><span parent="editEdgeMode" class="right-caret" id="method_editEdgeMode"></span> editEdgeMode()</td> - </tr> - <tr class="hidden" parent="editEdgeMode"> - <td class="midMethods">Returns: none</td> - <td>Go into editEdge mode. The explaination from <code>addNodeMode</code> applies here as well.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','deleteSelected', this);"> - <td colspan="2"><span parent="deleteSelected" class="right-caret" id="method_deleteSelected"></span> deleteSelected()</td> - </tr> - <tr class="hidden" parent="deleteSelected"> - <td class="midMethods">Returns: none</td> - <td>Delete selected. Having edit mode or manipulation enabled is not required.</td> - </tr> - - - <tr id="methodInformation" class="subHeader"> - <td colspan="2">Methods to get information on nodes and edges.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getPositions', this);"> - <td colspan="2"><span parent="getPositions" class="right-caret" id="method_getPositions"></span> getPositions(<code><i>[Array of - nodeIds]</i></code>) - </td> - </tr> - <tr class="hidden" parent="getPositions"> - <td class="midMethods">Returns: Object</td> - <td>Returns the x y positions in canvas space of the nodes with the supplied nodeIds as an object: -<pre class="code"> -{ - nodeId1: {x: xValue, y:yValue}, - nodeId2: {x: xValue, y:yValue}, - ... -} -</pre> - Alternative inputs are a String containing a nodeId or nothing. When a String is supplied, the - position - of the node corresponding to the ID is returned. When nothing is supplied, the positions of all - nodes - are returned. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','storePositions', this);"> - <td colspan="2"><span parent="storePositions" class="right-caret" id="method_storePositions"></span> storePositions()</td> - </tr> - <tr class="hidden" parent="storePositions"> - <td class="midMethods">Returns: none</td> - <td>When using the vis.DataSet to load your nodes into the network, this method will put the X and Y - positions of all nodes into that dataset. If you're loading your nodes from a database and have - this dynamically coupled with - the DataSet, you can - use this to stablize your network once, then save the positions in that database through the DataSet - so - the next - time you load the nodes, stabilization will be near instantaneous. - <br><br> - If the nodes are still moving and you're using dynamic smooth edges (which is on by default), you - can - use the option <code>stabilization.onlyDynamicEdges</code> in the <a href="physics.html">physics - module</a> - to improve initialization time. - <br><br> - <b>This method does not support clustering. At the moment it is not possible to cache - positions when using clusters since they cannot be correctly initialized from just the - positions.</b> - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveNode', this);"> - <td colspan="2"><span parent="moveNode" class="right-caret" id="method_moveNode"></span> moveNode(<code><i>nodeId, Number x, Number y</i></code>)</td> - </tr> - <tr class="hidden" parent="moveNode"> - <td class="midMethods">Returns: none</td> - <td>You can use this to programatically move a node. <i>The supplied x and y positions have to be in canvas space!</i> - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getBoundingBox', this);"> - <td colspan="2"><span parent="getBoundingBox" class="right-caret" id="method_getBoundingBox"></span> getBoundingBox(<code><i>String - nodeId</i></code>) - </td> - </tr> - <tr class="hidden" parent="getBoundingBox"> - <td class="midMethods">Returns: Object</td> - <td> Returns a bounding box for the node including label in the format: -<pre class="code"> -{ - top: Number, - left: Number, - right: Number, - bottom: Number -} -</pre> - These values are in canvas space. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);"> - <td colspan="2"><span parent="getConnectedNodes" class="right-caret" id="method_getConnectedNodes"></span> getConnectedNodes(<code><i>String - nodeId or edgeId</i></code>) - </td> - </tr> - <tr class="hidden" parent="getConnectedNodes"> - <td class="midMethods">Returns: Array</td> - <td>Returns an array of nodeIds of the all the nodes that are directly connected to this node. If you supply an edgeId, - vis will first match the id to nodes. If no match is found, it will search in the edgelist and return an array: <code>[fromId, toId]</code>.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);"> - <td colspan="2"><span parent="getConnectedEdges" class="right-caret" id="method_getConnectedEdges"></span> getConnectedEdges(<code><i>String - nodeId</i></code>) - </td> - </tr> - <tr class="hidden" parent="getConnectedEdges"> - <td class="midMethods">Returns: Array</td> - <td>Returns an array of edgeIds of the edges connected to this node.</td> - </tr> - - - <tr id="methodPhysics" class="subHeader"> - <td colspan="2">Physics methods to control when the simulation should run.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','startSimulation', this);"> - <td colspan="2"><span parent="startSimulation" class="right-caret" id="method_startSimulation"></span> startSimulation()</td> - </tr> - <tr class="hidden" parent="startSimulation"> - <td class="midMethods">Returns: 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> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);"> - <td colspan="2"><span parent="stopSimulation" class="right-caret" id="method_stopSimulation"></span> stopSimulation()</td> - </tr> - <tr class="hidden" parent="stopSimulation"> - <td class="midMethods">Returns: 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 class="collapsible toggle" onclick="toggleTable('methodTable','stabilize', this);"> - <td colspan="2"><span parent="stabilize" class="right-caret" id="method_stabilize"></span> stabilize([iterations])</td> - </tr> - <tr class="hidden" parent="stabilize"> - <td class="midMethods">Returns: none</td> - <td>You can manually call stabilize at any time. All the stabilization options above are used. You can optionally supply the number of iterations it should do.</td> - </tr> - - - <tr id="methodSelection" class="subHeader"> - <td colspan="2">Selection methods for nodes and edges.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelection', this);"> - <td colspan="2"><span parent="getSelection" class="right-caret" id="method_getSelection"></span> getSelection()</td> - </tr> - <tr class="hidden" parent="getSelection"> - <td class="midMethods">Returns: Object</td> - <td>Returns an object with selected nodes and edges ids like this: - <pre class="code"> -{ - nodes: [Array of selected nodeIds], - edges: [Array of selected edgeIds] -}</pre> - </td> - </tr> - - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedNodes', this);"> - <td colspan="2"><span parent="getSelectedNodes" class="right-caret" id="method_getSelectedNodes"></span> getSelectedNodes()</td> - </tr> - <tr class="hidden" parent="getSelectedNodes"> - <td class="midMethods">Returns: Array</td> - <td>Returns an array of selected node ids like so: - <code>[nodeId1, nodeId2, ..]</code>. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getSelectedEdges', this);"> - <td colspan="2"><span parent="getSelectedEdges" class="right-caret" id="method_getSelectedEdges"></span> getSelectedEdges()</td> - </tr> - <tr class="hidden" parent="getSelectedEdges"> - <td class="midMethods">Returns: Array</td> - <td>Returns an array of selected edge ids like so: <code>[edgeId1, edgeId2, ..]</code>.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getNodeAt', this);"> - <td colspan="2"><span parent="getNodeAt" class="right-caret" id="method_getNodeAt"></span> getNodeAt(<code><i>{x: xPosition - DOM, y: yPosition DOM}</i></code>) - </td> - </tr> - <tr class="hidden" parent="getNodeAt"> - <td class="midMethods">Returns: String</td> - <td>Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left - corner - of the canvas. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getEdgeAt', this);"> - <td colspan="2"><span parent="getEdgeAt" class="right-caret" id="method_getEdgeAt"></span> getEdgeAt(<code><i>{x: xPosition - DOM, y: yPosition DOM}</i></code>) - </td> - </tr> - <tr class="hidden" parent="getEdgeAt"> - <td class="midMethods">Returns: String</td> - <td>Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left - corner - of the canvas.. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectNodes', this);"> - <td colspan="2"><span parent="selectNodes" class="right-caret" id="method_selectNodes"></span> selectNodes(<code><i>Array with - nodeIds</i></code>,<code><i>[Boolean - highlightEdges]</i></code>) - </td> - </tr> - <tr class="hidden" parent="selectNodes"> - <td class="midMethods">Returns: none</td> - <td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or - undefined, - the neighbouring edges will also be selected. This method unselects all other objects before - selecting - its own objects. <i>Does not fire events</i>. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','selectEdges', this);"> - <td colspan="2"><span parent="selectEdges" class="right-caret" id="method_selectEdges"></span> selectEdges(<code><i>Array with - edgeIds</i></code>) - </td> - </tr> - <tr class="hidden" parent="selectEdges"> - <td class="midMethods">Returns: none</td> - <td>Selects the edges corresponding to the id's in the input array. This method unselects all other - objects - before selecting its own objects. <i>Does not fire events</i>. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','setSelection', this);"> - <td colspan="2"><span parent="setSelection" class="right-caret" id="method_setSelection"></span> setSelection( - <code>Object selection</code>, - <code>[Object options]</code>)</td> - </tr> - <tr class="hidden" parent="setSelection"> - <td class="midMethods">Returns: none</td> - <td>Sets the selection, wich must be an object like this: - <pre class="code"> -{ - nodes: [Array of nodeIds], - edges: [Array of edgeIds] -}</pre> - You can also pass only <code>nodes</code> or <code>edges</code> in <code>selection</code> object. - Available options are: - <pre class="code"> -{ - unselectAll: Boolean, - highlightEdges: Boolean -}</pre> - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','unselectAll', this);"> - <td colspan="2"><span parent="unselectAll" class="right-caret" id="method_unselectAll"></span> unselectAll()</td> - </tr> - <tr class="hidden" parent="unselectAll"> - <td class="midMethods">Returns: none</td> - <td>Unselect all objects. <i>Does not fire events</i>.</td> - </tr> - - - <tr id="methodViewport" class="subHeader"> - <td colspan="2">Methods to control the viewport for zoom and animation.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getScale', this);"> - <td colspan="2"><span parent="getScale" class="right-caret" id="method_getScale"></span> getScale()</td> - </tr> - <tr class="hidden" parent="getScale"> - <td class="midMethods">Returns: Number</td> - <td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','clusterByHubsize', this);"> - <td colspan="2"><span parent="clusterByHubsize" class="right-caret" id="method_getViewPosition"></span> getViewPosition()</td> - </tr> - <tr class="hidden" parent="clusterByHubsize"> - <td class="midMethods">Returns: Object</td> - <td>Returns the current central focus point of the view in the form: <code>{ x: {Number}, y: {Number} }</code></td> - </tr> - - <tr class="collapsible toggle" onclick="toggleTable('methodTable','fit', this);"> - <td colspan="2"><span parent="fit" class="right-caret" id="method_fit"></span> fit(<code>[Object - options]</code>) - </td> - </tr> - <tr class="hidden" parent="fit"> - <td class="midMethods">Returns: 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], - animation: { // -------------------> can be a boolean too! - 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 below. - All options are optional for the fit method. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','focus', this);"> - <td colspan="2"><span parent="focus" class="right-caret" id="method_focus"></span> focus( - <code>String nodeId</code>, - <code>[Object options]</code>) - </td> - </tr> - <tr class="hidden" parent="focus"> - <td class="midMethods">Returns: 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 below. 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 the focus method. - </td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','moveTo', this);"> - <td colspan="2"><span parent="moveTo" class="right-caret" id="method_moveTo"></span> moveTo(<code>Object - options</code>) - </td> - </tr> - <tr class="hidden" parent="moveTo"> - <td class="midMethods">Returns: 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. - The scale is the target zoomlevel. Default value is 1.0. - The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is - {x:0,y:0}. - 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>. - - <i>You will have to define at least a scale, position or offset. Otherwise, there is nothing to move - to.</i> - </td> - </tr> - - - <tr class="collapsible toggle" onclick="toggleTable('methodTable','releaseNode', this);"> - <td colspan="2"><span parent="releaseNode" class="right-caret" id="method_releaseNode"></span> releaseNode()</td> - </tr> - <tr class="hidden" parent="releaseNode"> - <td class="midMethods">Returns: none</td> - <td>Programatically release the focussed node.</td> - </tr> - <tr id="methodConfigurator" class="subHeader"> - <td colspan="2">Methods to use with the configurator module.</td> - </tr> - <tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);"> - <td colspan="2"><span parent="getOptionsFromConfigurator" class="right-caret" id="method_getOptionsFromConfigurator"></span> getOptionsFromConfigurator()</td> - </tr> - <tr class="hidden" parent="getOptionsFromConfigurator"> - <td class="midMethods">Returns: Object</td> - <td>If you use the configurator, you can call this method to get an options object that contains all differences from the default options - caused by users interacting with the configurator. - </td> - </tr> - </table> - - <br> - <br> - - <h4 id="optionsObject">Cluster methods options object</h4> - - <p>The options object supplied to the cluster functions can contain these properties:</p> - <table class="methods"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Description</th> - </tr> - <tr><td>joinCondition(<br> <code>nodeOptions: Object</code><br>)</td> - <td>Function</td> - <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are - selected to be in the cluster and calls this function with their data as argument. - If this function returns true, this node will be added to the cluster. You have access to all - options - (including the default) - as well as any custom fields you may have added to the node to determine whether or not to include - it in - the cluster. Example: -<pre class="prettyprint lang-js"> -var nodes = [ - {id: 4, label: 'Node 4'}, - {id: 5, label: 'Node 5'}, - {id: 6, label: 'Node 6', cid:1}, - {id: 7, label: 'Node 7', cid:1} -] - -var options = { - joinCondition:function(nodeOptions) { - return nodeOptions.cid === 1; - } -} - -network.clustering.cluster(options); -</pre> - </td> - </tr> - <tr><td>processProperties(<br> <code>clusterOptions: Object</code>,<br> - <code>childNodesOptions: Array</code>,<br> - <code>childEdgesOptions: Array</code><br>)</td> - <td>Function</td> - <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with - the - properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all - contained - edges. You can use this to update the - properties of the cluster based on which items it contains. The function should return the - properties to - create the cluster node. In the example below, we ensure preservation of mass and value when forming - the - cluster: -<pre class="prettyprint lang-js"> -var options = { - processProperties: function (clusterOptions, - childNodes, childEdges) { - var totalMass = 0; - var totalValue = 0; - for (var i = 0; i < childNodes.length; i++) { - totalMass += childNodes[i].mass; - totalValue = childNodes[i].value - ? totalValue + childNodes[i].value - : totalValue; - } - clusterOptions.mass = totalMass; - if (totalValue > 0) { - clusterOptions.value = totalValue; - } - return clusterOptions; - }, -} -</pre> - </td> - </tr> - <tr><td id="event_clusterNodeProperties">clusterNodeProperties</td> - <td>Object</td> - <td><i>Optional. </i> This is an object containing the options for the cluster node. All options - described - in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster - node - any way you want. This is also the style object that is provided in the processProperties function - for - fine tuning. If undefined, default node options will be used.<br/><br/> - Default functionality only allows clustering if the cluster will contain 2 or more nodes. To allow clustering of single nodes you can use the <code>allowSingleNodeCluster : true</code> property. -<pre class="prettyprint lang-js"> - clusterNodeProperties: { - allowSingleNodeCluster: true - } -</pre> - </td> - </tr> - <tr><td id="event_clusterEdgeProperties">clusterEdgeProperties</td> - <td>Object</td> - <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. - All - options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can - style - the edges connecting to the cluster any way you want. If none are provided, the options from the - edges - that are replaced are used. If undefined, default edge options will be used. - </td> - </tr> - - </table> - </div> - <br /><hr /> - <div id="eventsDiv"> - <h2 id="Events">Events</h2> - - <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p> - - <p>These events are fired by the interaction module. They are related to user input.</p> - <table class="events"> - <tr> - <th>Name</th> - <th>Properties</th> - <th>Description</th> - </tr> - <tr class="subHeader"> - <td colspan="3">Events triggered by human interaction, selection, dragging etc.</td> - </tr> - <tr><td id="event_click">click</td> - <td> - Object - </td> - <td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as: - - <pre class="prettyprint lang-js">{ - nodes: [Array of selected nodeIds], - edges: [Array of selected edgeIds], - event: [Object] original click event, - pointer: { - DOM: {x:pointer_x, y:pointer_y}, - canvas: {x:canvas_x, y:canvas_y} - } -} -</pre> - </td> - </tr> - <tr><td id="event_doubleClick">doubleClick</td> - <td>same as <code>click</code>.</td> - <td>Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double - click - is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want - to - use the click events if a double click event is fired, just check the time between click events - before - processing them. - </td> - </tr> - <tr><td id="event_oncontext">oncontext</td> - <td>same as <code>click</code>.</td> - <td>Fired when the user click on the canvas with the right mouse button. The right mouse button does not - select by default. You can use the method <code>getNodeAt</code> to select the node if you - want. - </td> - </tr> - <tr><td id="event_hold">hold</td> - <td>same as <code>click</code>.</td> - <td>Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click - event - is also fired in this case. - </td> - </tr> - <tr><td id="event_release">release</td> - <td>same as <code>click</code>.</td> - <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. - </td> - </tr> - <tr><td id="event_select">select</td> - <td>same as <code>click</code>.</td> - <td>Fired when the selection has changed by user action. This means a node or edge has been selected, - added - to the selection or deselected. <b>All select events are only triggered on click and hold</b>. - </td> - </tr> - <tr><td id="event_selectNode">selectNode</td> - <td>same as <code>click</code>.</td> - <td>Fired when a node has been selected by the user.</td> - </tr> - <tr><td id="event_selectEdge">selectEdge</td> - <td>same as <code>click</code>.</td> - <td>Fired when a edge has been selected by the user.</td> - </tr> - <tr><td id="event_deselectNode">deselectNode</td> - <td>Object - </td> - <td>Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event. Passes an object with properties structured as: -<pre class="prettyprint lang-js">{ - nodes: [Array of selected nodeIds], - edges: [Array of selected edgeIds], - event: [Object] original click event, - pointer: { - DOM: {x:pointer_x, y:pointer_y}, - canvas: {x:canvas_x, y:canvas_y} - } - }, - previousSelection: { - nodes: [Array of previously selected nodeIds], - edges: [Array of previously selected edgeIds] - } -} -</pre> - </td> - </tr> - <tr><td id="event_deselectEdge">deselectEdge</td> - <td>same as <code>deselectNode</code>.</td> - <td>Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is - the - list of nodes and edges that were selected before the last user event. - </td> - </tr> - <tr><td id="event_dragStart">dragStart</td> - <td>same as <code>click</code>.</td> - <td>Fired when starting a drag.</td> - </tr> - <tr><td id="event_dragging">dragging</td> - <td>same as <code>click</code>.</td> - <td>Fired when dragging node(s) or the view.</td> - </tr> - <tr><td id="event_dragEnd">dragEnd</td> - <td>same as <code>click</code>.</td> - <td>Fired when the drag has finished.</td> - </tr> - <tr><td id="event_hoverNode">hoverNode</td> - <td><code>{node: nodeId}</code></td> - <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse hovers over a node.</td> - </tr> - <tr><td id="event_blurNode">blurNode</td> - <td><code>{node: nodeId}</code></td> - <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse moved away from a node it was hovering over before.</td> - </tr> - <tr><td id="event_hoverEdge">hoverEdge</td> - <td><code>{edge: edgeId}</code></td> - <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse hovers over an edge.</td> - </tr> - <tr><td id="event_blurEdge">blurEdge</td> - <td><code>{edge: edgeId}</code></td> - <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse moved away from an edge it was hovering over before.</td> - </tr> - <tr><td id="event_zoom">zoom</td> - <td><code>{direction:'+'/'-', scale: Number}</code></td> - <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td> - </tr> - <tr><td id="event_showPopup">showPopup</td> - <td><code>id of item corresponding to popup</code></td> - <td>Fired when the popup (tooltip) is shown.</td> - </tr> - <tr><td id="event_hidePopup">hidePopup</td> - <td>none</td> - <td>Fired when the popup (tooltip) is hidden.</td> - </tr> - <tr class="subHeader "> - <td colspan="3">Events triggered the physics simulation. Can be used to trigger GUI updates.</td> - </tr> - <tr><td id="event_startStabilizing">startStabilizing</td> - <td>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 id="event_stabilizationProgress">stabilizationProgress</td> - <td>Object</td> - <td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization. Passes an object with properties structured as: - - <pre class="prettyprint lang-js">{ - iterations: Number // iterations so far, - total: Number // total iterations in options -}</pre> - </td> - </tr> - <tr><td id="event_stabilizationIterationsDone">stabilizationIterationsDone</td> - <td>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 id="event_stabilized">stabilized</td> - <td>Object</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. Passes an object with properties structured as: -<pre class="prettyprint lang-js">{ - iterations: Number // iterations it took -}</pre> - - </td> - <tr class="subHeader"> - <td colspan="3">Event triggered by the canvas.</td> - </tr> - <tr><td id="event_resize">resize</td> - <td>Object</td> - <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has changed in size, a setSize() call with new values or a setOptions() with new width and/or height values. Passes an object with properties structured as: - -<pre class="prettyprint lang-js"> -{ - width: Number // the new width of the canvas - height: Number // the new height of the canvas - oldWidth: Number // the old width of the canvas - oldHeight: Number // the old height of the canvas -} -</pre> - </td> - - </tr> - <tr class="subHeader "> - <td colspan="3">Events triggered by the rendering module. Can be used to draw custom elements on the - canvas. - </td> - </tr> - <tr><td id="event_initRedraw">initRedraw</td> - <td>none</td> - <td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to - move - custom elements before starting drawing the new frame. - </td> - <tr><td id="event_beforeDrawing">beforeDrawing</td> - <td><code>canvas context</code></td> - <td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before - all - edges and nodes are drawn. Can be used to draw behind the network. - </td> - <tr><td id="event_afterDrawing">afterDrawing</td> - <td><code>canvas context</code></td> - <td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network. - </td> - </tr> - <tr class="subHeader"> - <td colspan="3">Event triggered by the view module.</td> - </tr> - <tr><td id="event_animationFinished">animationFinished</td> - <td>none</td> - <td>Fired when an animation is finished.</td> - </tr> - <tr class="subHeader"> - <td colspan="3">Event triggered by the configuration module.</td> - </tr> - <tr><td id="event_configChange">configChange</td> - <td>Object</td> - <td>Fired when a user changes any option in the configurator. The options object can be used with the setOptions method or stringified using JSON.stringify(). - You do not have to manually put the options into the network: this is done automatically. You can use the event - to store user options in the database. - </td> - </tr> - </table> - - </div> - - <br /><hr /> - <div id="importDiv"> - <h2 id="importing_data">Importing data</h2> - - <p>Network contains conversion utilities to import data from <a href="#importGephi">Gephi</a> and graphs in the <a href="#importDot">DOT language</a>.</p> - - <h3 id="importGephi">Import data from Gephi</h3> - - <p> - Network can import data straight from an exported json file from gephi. You can get the JSON exporter here: - <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>. - An example exists showing how to get a JSON file into Vis: - </p> - - <p> - Example usage: - </p> - -<pre class="prettyprint lang-js"> -// load the JSON file containing the Gephi network. -var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in <a href="http://visjs.org/examples/network/data/importingFromGephi.html">importing_from_gephi</a>. - -// you can customize the result like with these options. These are explained below. -// These are the default options. -var parserOptions = { - edges: { - inheritColors: false - }, - nodes: { - fixed: true, - parseColor: false - } -} - -// parse the gephi file to receive an object -// containing nodes and edges in vis format. -var parsed = vis.network.convertGephi(gephiJSON, parserOptions); - -// provide data in the normal fashion -var data = { - nodes: parsed.nodes, - edged: parsed.edges -}; - -// create a network -var network = new vis.Network(container, data); -</pre> - - <br> - <h4>Gephi parser options</h4> - - There are a few options you can use to tell Vis what to do with the data from Gephi. - <table class="options"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr><td>nodes.fixed</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>When false, the nodes will move according to the physics model after import. If true, the nodes do - not move at all. If set to true, the node positions have to be defined to avoid infinite recursion - errors in the physics. - </td> - </tr> - <tr><td>nodes.parseColor</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>If true, the color will be parsed by the vis parser, generating extra colors for the borders, - highlighs and hover. If false, the node will be the supplied color. - </td> - </tr> - <tr><td>edges.inheritColor</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>When true, the color supplied by gephi is ignored and the inherit color mode is used with the global - setting. - </td> - </tr> - - </table> - - <h3 id="importDot">Import data in DOT language</h3> - - <p> - Network supports data in the - <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>. - To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT - language - into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other - options if you'd like. - </p> - - <p> - Example usage: - </p> - -<pre class="prettyprint lang-js"> -// provide data in the DOT language -var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'; -var parsedData = vis.network.convertDot(DOTstring); - -var data = { - nodes: parsedData.nodes, - edges: parsedData.edges -} - -var options = parsedData.options; - -// you can extend the options like a normal JSON variable: -options.nodes = { - color: 'red' -} - -// create a network -var network = new vis.Network(container, data, options); -</pre> - </div> - - -</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script> diff --git a/www/lib/vis/docs/network/interaction.html b/www/lib/vis/docs/network/interaction.html deleted file mode 100644 index 5483636b..00000000 --- a/www/lib/vis/docs/network/interaction.html +++ /dev/null @@ -1,172 +0,0 @@ -<!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 - Interaction documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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();"> - -<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><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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - interaction</h1> - <p>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</p> - <h3>Options</h3> - <p>The options for the interaction module have to be contained in an object titled 'interaction'.</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 = { - interaction:{ - dragNodes:true, - dragView: true, - hideEdgesOnDrag: false, - hideNodesOnDrag: false, - hover: false, - hoverConnectedEdges: true, - keyboard: { - enabled: false, - speed: {x: 10, y: 10, zoom: 0.02}, - bindToWindow: true - }, - multiselect: false, - navigationButtons: false, - selectable: true, - selectConnectedEdges: true, - tooltipDelay: 300, - zoomView: true - } -} - -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 = { - interaction:{ - keyboard: false - } -} - -network.setOptions(options); -</pre> - - <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p> - <table class="options" id="optionTable"> - <tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr> - <tr><td>dragNodes</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr> - <tr><td>dragView</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the view can be dragged around by the user.</td></tr> - <tr><td>hideEdgesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> - <tr><td>hideNodesOnDrag</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr> - <tr><td>hover</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr> - <tr><td>hoverConnectedEdges</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, on hovering over a node, it's connecting edges are highlighted.</td></tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td>Object or Boolean</td> <td><code>Object</code></td> <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr> - <tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the usage of the keyboard shortcuts. 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="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr> - <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.y</td> <td>Number</td> <td><code>1</code></td> <td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr> - <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.zoom</td> <td>Number</td> <td><code>0.02</code></td> <td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr> - <tr parent="keyboard" class="hidden"><td class="indent">keyboard.bindToWindow</td> <td>Boolean</td> <td><code>true</code></td> <td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr> - <tr><td>multiselect</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, a longheld click (or touch) as well as a control-click will add to the selection.</td></tr> - <tr><td>navigationButtons</td> <td>Boolean</td> <td><code>false</code></td> <td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr> - <tr><td>selectable</td> <td>Boolean</td><td><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr> - <tr><td>selectConnectedEdges</td> <td>Boolean</td><td><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr> - <tr><td>tooltipDelay</td> <td>Number</td> <td><code>300</code></td> <td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr> - <tr><td>zoomView</td> <td>Boolean</td> <td><code>true</code></td> <td>When true, the user can zoom in.</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script>
\ No newline at end of file diff --git a/www/lib/vis/docs/network/layout.html b/www/lib/vis/docs/network/layout.html deleted file mode 100644 index 3b38048b..00000000 --- a/www/lib/vis/docs/network/layout.html +++ /dev/null @@ -1,169 +0,0 @@ -<!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 - Layout documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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> - - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.css" rel="stylesheet"> - - <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><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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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, - improvedLayout:true, - hierarchical: { - enabled:false, - levelSeparation: 150, - nodeSpacing: 100, - treeSpacing: 200, - blockShifting: true, - edgeMinimization: true, - parentCentralization: true, - 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 id="layout"><td>improvedLayout</td><td>Boolean</td><td><code>true</code></td> <td>When enabled, the network will use the Kamada Kawai algorithm for initial layout. For networks larger than 100 nodes, clustering will be performed automatically to reduce the amount of nodes. This can greatly improve the stabilization times. If the network is very interconnected (no or few leaf nodes), this may not work and it will revert back to the old method. Performance will be improved in the future.</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.nodeSpacing</td><td>Number</td><td><code>100</code></td> <td>Minimum distance between nodes on the free axis. This is only for the initial layout. If you enable physics, the node distance there will be the effective node distance.</td></tr> - <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.treeSpacing</td><td>Number</td><td><code>200</code></td> <td>Distance between different trees (independent networks). This is only for the initial layout. If you enable physics, the repulsion model will denote the distance between the trees.</td></tr> - <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.blockShifting</td><td>Boolean</td><td><code>true</code></td> <td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift - it's branch along with it for as far as it can, respecting the nodeSpacing on any level. This is mainly for the initial layout. If you enable physics, they layout will be determined by the physics. This will greatly speed up the stabilization time though!</td></tr> - <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.edgeMinimization</td><td>Boolean</td><td><code>true</code></td> <td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process. - Each node will try to move along its free axis to reduce the total length of it's edges. This is mainly for the initial layout. If you enable physics, they layout will be determined by the physics. This will greatly speed up the stabilization time though!</td></tr> - <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.parentCentralization</td><td>Boolean</td><td><code>true</code></td> <td>When true, the parents nodes will be centered again after the the layout algorithm has been finished.</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script>
\ No newline at end of file diff --git a/www/lib/vis/docs/network/manipulation.html b/www/lib/vis/docs/network/manipulation.html deleted file mode 100644 index 7f8db952..00000000 --- a/www/lib/vis/docs/network/manipulation.html +++ /dev/null @@ -1,204 +0,0 @@ -<!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 - Manipulation documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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();"> - -<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><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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - manipulation</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 manipulation module have to be contained in an object titled 'manipulation'.</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 = { - manipulation: { - enabled: false, - initiallyActive: false, - addNode: true, - addEdge: true, - editNode: undefined, - editEdge: true, - deleteNode: true, - deleteEdge: true, - controlNodeStyle:{ - // all node options are valid. - } - } -} - -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 = { - manipulation: false -} - -network.setOptions(options); -</pre> - <table class="options" id="optionTable"> - <tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr> - <tr><td>enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>Toggle the manipulation system on or off. Even when false, the manipulation API through the methods will still work. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr> - <tr><td>initiallyActive</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr> - <tr><td>addNode</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>You can use these options to switch certain functionalities on or off of attach - a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system, - the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional. - <br><br> - - When you supply a boolean, you only toggle the 'add node' button on the GUI of the manipulation system. The lack of handling function could effect the API when using the methods. - When a function is supplied, it will be called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example: -<pre class="code"> -var options = { - manipulation: { - addNode: function(nodeData,callback) { - nodeData.label = 'hello world'; - callback(nodeData); - } - } -} -</pre> - This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr> - <tr><td>addEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the availability of the 'addEdge' button in the GUI, the API through the methods will still work except (obviously) there will be no handler function. - When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example: -<pre class="code"> -var options = { - manipulation: { - addEdge: function(edgeData,callback) { - if (edgeData.from === edgeData.to) { - var r = confirm("Do you want to connect the node to itself?"); - if (r === true) { - callback(edgeData); - } - } - else { - callback(edgeData); - } - } - } -} -</pre> - This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr> - <tr><td>editNode</td> <td>Function</td> <td><code>undefined</code></td> <td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr> - <tr><td>editEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the editing of edges in the GUI. When a function is supplied, it will be called when an edge is selected and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr> - <tr><td>deleteNode</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the deletion of nodes in the GUI. If function, it will be called when a node is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr> - <tr><td>deleteEdge</td> <td>Boolean or Function</td> <td><code>true</code></td> <td>If boolean, toggle the deletion of edges in the GUI. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds (empty) and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr> - <tr><td>controlNodeStyle</td> <td>Object</td> <td>Object</td><td>You can supply any styling information you'd like here. All fields described in <a href="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default: -<pre class="code"> -{ - shape:'dot', - size:6, - color: { - background: '#ff0000', - border: '#3c3c3c', - highlight: { - background: '#07f968', - border: '#3c3c3c' - } - }, - borderWidth: 2, - borderWidthSelected: 2 -} -</pre></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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script>
\ No newline at end of file diff --git a/www/lib/vis/docs/network/nodes.html b/www/lib/vis/docs/network/nodes.html deleted file mode 100644 index c3cd63a1..00000000 --- a/www/lib/vis/docs/network/nodes.html +++ /dev/null @@ -1,742 +0,0 @@ -<!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 - Nodes documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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();"> - -<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><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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 - nodes</h1> - - <p>Handles the creation and deletion of nodes and contains the global node options and styles.</p> - <h3>Options</h3> - <p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined - in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p> - <p><b><i>When you have given a node an option, you will override the global option for that property, and also the group option for that property if the node is in a group. If you then set that option to <code>null</code>, - it will revert back to the default value.</i></b> - </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 = { - nodes:{ - borderWidth: 1, - borderWidthSelected: 2, - brokenImage:undefined, - color: { - border: '#2B7CE9', - background: '#97C2FC', - highlight: { - border: '#2B7CE9', - background: '#D2E5FF' - }, - hover: { - border: '#2B7CE9', - background: '#D2E5FF' - } - }, - fixed: { - x:false, - y:false - }, - font: { - color: '#343434', - size: 14, // px - face: 'arial', - background: 'none', - strokeWidth: 0, // px - strokeColor: '#ffffff', - align: 'center' - }, - group: undefined, - hidden: false, - icon: { - face: 'FontAwesome', - code: undefined, - size: 50, //50, - color:'#2B7CE9' - }, - image: undefined, - label: undefined, - labelHighlightBold: true, - level: undefined, - mass: 1, - physics: true, - scaling: { - min: 10, - max: 30, - label: { - enabled: false, - min: 14, - max: 30, - maxVisible: 30, - drawThreshold: 5 - }, - customScalingFunction: function (min,max,total,value) { - if (max === min) { - return 0.5; - } - else { - let scale = 1 / (max - min); - return Math.max(0,(value - min)*scale); - } - } - }, - shadow:{ - enabled: false, - color: 'rgba(0,0,0,0.5)', - size:10, - x:5, - y:5 - }, - shape: 'ellipse', - shapeProperties: { - borderDashes: false, // only for borders - borderRadius: 6, // only for box shape - interpolation: false, // only for image and circularImage shapes - useImageSize: false, // only for image and circularImage shapes - useBorderWithImage: false // only for image shape - } - size: 25, - title: undefined, - value: undefined, - x: undefined, - y: undefined - } -} - -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 = { - nodes:{ - color: '#ff0000', - fixed: false, - font: '12px arial red', - scaling: { - label: true - }, - shadow: true - } -} -network.setOptions(options); -</pre> - - <p>These options can also be set per individual node. All of the individual options are explained here:</p> - <table class="options" id="optionTable"> - <tr> - <th>Name</th> - <th>Type</th> - <th>Default</th> - <th>Description</th> - </tr> - <tr> - <td>borderWidth</td> - <td>Number</td> - <td><code>1</code></td> - <td>The width of the border of the node.</td> - </tr> - <tr> - <td>borderWidthSelected</td> - <td>Number</td> - <td><code>2</code></td> - <td>The width of the border of the node when it is selected. When undefined, the borderWidth * 2 is used.</td> - </tr> - <tr> - <td>brokenImage</td> - <td>String</td> - <td><code>undefined</code></td> - <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to - a backup image in case the URL supplied in the image option cannot be resolved. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);"> - <td><span parent="color" class="right-caret"></span> color</td> - <td>Object or String</td> - <td><code>Object</code></td> - <td>The color object contains the color information of the node in every situation. When the node only needs - a single color, a color value like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or <code>'red'</code> - can be supplied instead of an object. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.border</td> - <td>String</td> - <td><code>'#2B7CE9'</code></td> - <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is - enabled in the interaction module)</i>. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.background</td> - <td>String</td> - <td><code>'#D2E5FF'</code></td> - <td>The color of the background of the node when it is not selected or hovered over <i>(assuming hover is - enabled in the interaction module)</i>. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.highlight</td> - <td>Object or String</td> - <td><code>Object</code></td> - <td>The color the node when it is selected. Alternatively you can just supply a string color value.</td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent2">color.highlight.border</td> - <td>String</td> - <td><code>'#2B7CE9'</code></td> - <td>The color of the border of the node when it is selected.</td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent2">color.highlight.background</td> - <td>String</td> - <td><code>'#D2E5FF'</code></td> - <td>The color of the background of the node when it is selected.</td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent">color.hover</td> - <td>Object or String</td> - <td><code>Object</code></td> - <td>The color the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction - module)</i>. Shorthand like above is also supported. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent2">color.hover.border</td> - <td>String</td> - <td><code>'#2B7CE9'</code></td> - <td>The color of the border of the node when the mouse hovers over it <i>(assuming hover is enabled in the - interaction module)</i>. - </td> - </tr> - <tr parent="color" class="hidden"> - <td class="indent2">color.hover.background</td> - <td>String</td> - <td><code>'#D2E5FF'</code></td> - <td>The color of the background of the node when the mouse hovers over it <i>(assuming hover is enabled in - the interaction module)</i>. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);"> - <td><span parent="fixed" class="right-caret"></span> fixed</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When true, the node will not move but IS part of the physics simulation. When defined as an object, - movement in either X or Y direction can be disabled. - </td> - </tr> - <tr parent="fixed" class="hidden"> - <td class="indent">fixed.x</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>When true, the node will not move in the X direction.</td> - </tr> - <tr parent="fixed" class="hidden"> - <td class="indent">fixed.y</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>When true, the node will not move in the Y direction.</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);"> - <td><span parent="font" class="right-caret"></span> font</td> - <td>Object or String</td> - <td><code>false</code></td> - <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face - color'</code> for example: <code>'14px arial red'</code>. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.color</td> - <td>String</td> - <td><code>'#343434'</code></td> - <td>Color of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.size</td> - <td>Number</td> - <td><code>14</code></td> - <td>Size of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.face</td> - <td>String</td> - <td><code>'arial'</code></td> - <td>Font face (or font family) of the label text.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.background</td> - <td>String</td> - <td><code>undefined</code></td> - <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind - the label in the supplied color. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.strokeWidth</td> - <td>Number</td> - <td><code>0</code></td> - <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value - higher than 0 is supplied, the stroke will be drawn. - </td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.strokeColor</td> - <td>String</td> - <td><code>'#ffffff'</code></td> - <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> - </tr> - <tr parent="font" class="hidden"> - <td class="indent">font.align</td> - <td>String</td> - <td><code>'center'</code></td> - <td>This can be set to 'left' to make the label left-aligned. Otherwise, - defaults to 'center'.</td> - </tr> - <tr> - <td>group</td> - <td>String</td> - <td><code>undefined</code></td> - <td>When not <code>undefined</code>, the node will belong to the defined group. Styling information of - that group will apply to this node. Node specific styling overrides group styling. - </td> - </tr> - <tr> - <td>hidden</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>When true, the node will not be shown. It will still be part of the physics simulation though!</td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','icon', this);"> - <td><span parent="icon" class="right-caret"></span> icon</td> - <td>Object</td> - <td><code>Object</code></td> - <td>These options are only used when the shape is set to <code>icon</code>.</td> - </tr> - <tr parent="icon" class="hidden"> - <td class="indent">icon.face</td> - <td>String</td> - <td><code>'FontAwesome'</code></td> - <td>These options are only used when the shape is set to <code>icon</code>. The possible options for the - face are: <code>'FontAwesome'</code> and <code>'Ionicons'</code>. - </td> - </tr> - <tr parent="icon" class="hidden"> - <td class="indent">icon.code</td> - <td>String</td> - <td><code>undefined</code></td> - <td>This is the code of the icon, for example <code>'\uf007'</code>.</td> - </tr> - <tr parent="icon" class="hidden"> - <td class="indent">icon.size</td> - <td>Number</td> - <td><code>50</code></td> - <td>The size of the icon.</td> - </tr> - <tr parent="icon" class="hidden"> - <td class="indent">icon.color</td> - <td>String</td> - <td><code>'#2B7CE9'</code></td> - <td>The color of the icon.</td> - </tr> - <tr> - <td>id</td> - <td>String</td> - <td><code>undefined</code></td> - <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td> - </tr> - <tr> - <td>image</td> - <td>String</td> - <td><code>undefined</code></td> - <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL - to an image. If the image cannot be found, the brokenImage option can be used. - </td> - </tr> - <tr> - <td>label</td> - <td>String</td> - <td><code>undefined</code></td> - <td>The label is the piece of text shown in or under the node, depending on the shape.</td> - </tr> - <tr> - <td>labelHighlightBold</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>Determines whether or not the label becomes bold when the node is selected.</td> - </tr> - <tr> - <td>level</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td> - </tr> - <tr> - <td>mass</td> - <td>Number</td> - <td><code>1</code></td> - <td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By - increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended. - </td> - </tr> - <tr> - <td>physics</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>When false, the node is not part of the physics simulation. It will not move except for from manual - dragging. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);"> - <td><span parent="scaling" class="right-caret"></span> scaling</td> - <td>Object</td> - <td><code>Object</code></td> - <td>If the <code>value</code> option is specified, the size of the nodes will be scaled according to the - properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as - their size is based on the size of the label. - Only scalable when label scaling is enabled are: - <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. - Always scalable are: - <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, - <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and - <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.min</td> - <td>Number</td> - <td><code>10</code></td> - <td>If nodes have a value, their sizes are determined by the value, the scaling function and the min max - values. The min value is the minimum allowed value. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.max</td> - <td>Number</td> - <td><code>30</code></td> - <td>This is the maximum allowed size when the nodes are scaled using the value option.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.label</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>This can be false if the label is not allowed to scale with the node. If true it will scale using - default settigns. For further customization, you can supply an object. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.enabled</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>Toggle the scaling of the label on or off. 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="scaling" class="hidden"> - <td class="indent2">scaling.label.min</td> - <td>Number</td> - <td><code>14</code></td> - <td>The minimum font-size used for labels when scaling.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.max</td> - <td>Number</td> - <td><code>30</code></td> - <td>The maximum font-size used for labels when scaling.</td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.maxVisible</td> - <td>Number</td> - <td><code>30</code></td> - <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this - option. If set to 30, the font will never look larger than size 30 zoomed at 100%. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent2">scaling.label.drawThreshold</td> - <td>Number</td> - <td><code>5</code></td> - <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. - When using font scaling, you can use this together with the maxVisible to first show labels of important - nodes when zoomed out and only show the rest when zooming in. - </td> - </tr> - <tr parent="scaling" class="hidden"> - <td class="indent">scaling.customScalingFunction</td> - <td>Function</td> - <td>in description</td> - <td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled - based on their values. The default function is: -<pre> -function (min,max,total,value) { - if (max === min) { - return 0.5; - } - else { - var scale = 1 / (max - min); - return Math.max(0,(value - min)*scale); - } -} -</pre> - The function receives the minimum value of the set, the maximum value, the total sum of all values and - finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The - nodes and edges then calculate their size as follows: -<pre> -var scale = customScalingFunction(min,max,total,value); -var diff = maxSize - minSize; -mySize = minSize + diff * scale; -</pre> - Please note: <code>maxSize</code> and <code>minSize</code> are the values <code>scaling.max</code> - and <code>scaling.min</code> provided in the options. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);"> - <td><span parent="shadow" class="right-caret"></span> shadow</td> - <td>Object or Boolean</td> - <td><code>Object</code></td> - <td>When true, the node casts a shadow using the default settings. This can be further refined by supplying - an object. - </td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.enabled</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>Toggle the casting of shadows. 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="shadow" class="hidden"> - <td class="indent">shadow.color</td> - <td>String</td> - <td><code>'rgba(0,0,0,0.5)'</code></td> - <td>The color size of the shadow as a string. Supported formats are 'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.size</td> - <td>Number</td> - <td><code>10</code></td> - <td>The blur size of the shadow.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.x</td> - <td>Number</td> - <td><code>5</code></td> - <td>The x offset.</td> - </tr> - <tr parent="shadow" class="hidden"> - <td class="indent">shadow.y</td> - <td>Number</td> - <td><code>5</code></td> - <td>The y offset.</td> - </tr> - <tr> - <td>shape</td> - <td>String</td> - <td><code>'ellipse'</code></td> - <td>The shape defines what the node looks like. There are two types of nodes. One type has the label inside - of it and the other type has the label underneath it. The types with the label inside of it are: - <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. - The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>, - <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>, - <code>triangleDown</code>, <code>square</code> and <code>icon</code>. - </td> - </tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);"> - <td><span parent="shapeProperties" class="right-caret"></span> shapeProperties</td> - <td>Object</td> - <td><code>Object</code></td> - <td>This object contains configuration for specific shapes - </td> - </tr> - <tr parent="shapeProperties" class="hidden"> - <td class="indent">shapeProperties.borderDashes</td> - <td>Array or Boolean</td> - <td><code>false</code></td> - <td>This property applies to all shapes that have borders. - You set the dashes by supplying an Array. Array formart: [dash length, gap length]. - You can also use a Boolean, false is disable and true is default [5,15]. - </td> - </tr> - <tr parent="shapeProperties" class="hidden"> - <td class="indent">shapeProperties.borderRadius</td> - <td>Number</td> - <td><code>6</code></td> - <td>This property is used only for the <code>box</code> shape. It allows you to determine the roundness of the corners of the shape. - </td> - </tr> - <tr parent="shapeProperties" class="hidden"> - <td class="indent">shapeProperties.interpolation</td> - <td>Boolean</td> - <td><code>true</code></td> - <td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When true, the image is resampled when scaled down, resulting in a nicer image at the cost of computional time.</i> - </td> - </tr> - <tr parent="shapeProperties" class="hidden"> - <td class="indent">shapeProperties.useImageSize</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When false, the size option is used, when true, the size of the image is used. <br><i><b>Important</b>: - if this is set to true, the image cannot be scaled with the value option!</i> - </td> - </tr> - <tr parent="shapeProperties" class="hidden"> - <td class="indent">shapeProperties.useBorderWithImage</td> - <td>Boolean</td> - <td><code>false</code></td> - <td>This property only applies to the <code>image</code> shape. - When true, the color object is used. A rectangle with the background color is - drawn behind it and it has a border. This means all border options are taken into account. - </td> - </tr> - <tr> - <td>size</td> - <td>Number</td> - <td><code>25</code></td> - <td>The size is used to determine the size of node shapes that do not have the label inside of them. These - shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, - <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and - <code>icon</code></td> - </tr> - <tr> - <td>title</td> - <td>String or Element</td> - <td><code>undefined</code></td> - <td>Title to be displayed when the user hovers over the node. The title can be an HTML element or a string - containing plain text or HTML. - </td> - </tr> - <tr> - <td>value</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>When a value is set, the nodes will be scaled using the options in the scaling object defined above. - </td> - </tr> - <tr> - <td>x</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>This gives a node an initial x position. When using the hierarchical layout, either the x or y position - is set by the layout engine depending on the type of view. The other value remains untouched. When using - stabilization, the stabilized position may be different from the initial one. To lock the node to that - position use the physics or fixed options. - </td> - </tr> - <tr> - <td>y</td> - <td>Number</td> - <td><code>undefined</code></td> - <td>This gives a node an initial y position. When using the hierarchical layout, either the x or y position - is set by the layout engine depending on the type of view. The other value remains untouched. When using - stabilization, the stabilized position may be different from the initial one. To lock the node to that - position use the physics or fixed options. - </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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script> diff --git a/www/lib/vis/docs/network/physics.html b/www/lib/vis/docs/network/physics.html deleted file mode 100644 index c8fe9920..00000000 --- a/www/lib/vis/docs/network/physics.html +++ /dev/null @@ -1,224 +0,0 @@ -<!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 - Physics documentation.</title> - - <!-- Bootstrap core CSS --> - <link href="../css/bootstrap.css" rel="stylesheet"> - <!-- Tipue vendor css --> - <link href="../css/tipuesearch.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();"> - -<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><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> - <form class="navbar-form navbar-right" role="search"> - <input name="q" id="tipue_search_input" autocomplete="off" type="text" class="form-control" placeholder="Enter keywords"> - <button type="button" class="btn btn-default" onclick="vis.initSiteSearch(true);">Go!</button> - </form> - <div id="search-results-wrapper" class="panel panel-default"> - <div class="panel-body"> - <div id="tipue_search_content"></div> - </div> - </div> - <div id="keyword-info" class="panel panel-success"> - <div class="panel-body"> - Found <span id="keyword-count"></span> results. Click <a id="keyword-jumper-button" href="">here</a> to jump to the first keyword occurence! - </div> - </div> - </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 physics simulation, moving the nodes and edges to show them clearly.</p> - <h3>Options</h3> - <p>The options for the physics have to be contained in an object titled 'physics'.</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 = { - physics:{ - enabled: true, - barnesHut: { - gravitationalConstant: -2000, - centralGravity: 0.3, - springLength: 95, - springConstant: 0.04, - damping: 0.09, - avoidOverlap: 0 - }, - forceAtlas2Based: { - gravitationalConstant: -50, - centralGravity: 0.01, - springConstant: 0.08, - springLength: 100, - damping: 0.4, - avoidOverlap: 0 - }, - repulsion: { - centralGravity: 0.2, - springLength: 200, - springConstant: 0.05, - nodeDistance: 100, - damping: 0.09 - }, - hierarchicalRepulsion: { - centralGravity: 0.0, - springLength: 100, - springConstant: 0.01, - nodeDistance: 120, - damping: 0.09 - }, - maxVelocity: 50, - minVelocity: 0.1, - solver: 'barnesHut', - stabilization: { - enabled: true, - iterations: 1000, - updateInterval: 100, - onlyDynamicEdges: false, - fit: true - }, - timestep: 0.5, - adaptiveTimestep: true - } -} - -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 = { - physics:{ - stabilization: false - } -} -network.setOptions(options); -</pre> - <p>All of the individual options are explained here:</p> - <table class="options" id="optionTable"> - <tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr> - <tr><td>enabled</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle the physics system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr> - <tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td> <td>Object</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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 parent="barnesHut" class="hidden"><td class="indent">barnesHut.avoidOverlap</td> <td>Number</td> <td><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr> - - <tr class='toggle collapsible' onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><span parent="forceAtlas2Based" class="right-caret"></span> forceAtlas2Based</td> <td>Object</td> <td><code>Object</code></td> <td>Force Atlas 2 has been developed by <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679" target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided - by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model, - which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a - multiplier based on the amount of connected edges plus one.</td></tr> - <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.gravitationalConstant</td> <td>Number</td> <td><code>-50</code></td> <td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr> - <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.centralGravity</td> <td>Number</td> <td><code>0.01</code></td> <td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr> - <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springLength</td> <td>Number</td> <td><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="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springConstant</td> <td>Number</td> <td><code>0.08</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr> - <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.damping</td> <td>Number</td> <td><code>0.4</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 parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.avoidOverlap</td> <td>Number</td> <td><code>0</code></td> <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr> - - <tr class='toggle collapsible' onclick="toggleTable('optionTable','repulsion', this);"><td><span parent="repulsion" class="right-caret"></span> repulsion</td> <td>Object</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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('optionTable','hierarchicalRepulsion', this);"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td> <td>Object</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>Number</td> <td><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>String</td> <td><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</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('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td>Object | Boolean</td><td><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>Boolean</td> <td><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>Number</td> <td><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>Number</td> <td><code>50</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>Boolean</td> <td><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.fit</td> <td>Boolean</td> <td><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>Number</td> <td><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> - <tr><td>adaptiveTimestep</td> <td>Boolean</td> <td><code>true</code></td> <td>If this is enabled, the timestep will intelligently be adapted <b>(only during the stabilization stage if stabilization is enabled!)</b> to greatly decrease stabilization times. The timestep configured above is taken as the minimum timestep. <a href="layout.html#layout" target="_blank">This can be further improved by using the improvedLayout algorithm</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> -<!-- jquery extensions --> -<script src="../js/jquery.highlight.js"></script> -<script src="../js/jquery.url.min.js"></script> -<!-- Tipue vendor js --> -<script src="../js/tipuesearch.config.js"></script> -<script src="../js/tipuesearch.js"></script> -<!-- controller --> -<script src="../js/main.js"></script>
\ No newline at end of file |