You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
8.2 KiB
138 lines
8.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" HREF="favicon.ico">
|
|
<title>vis.js - A dynamic, browser based visualization library.</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../css/bootstrap.css" rel="stylesheet">
|
|
<link href="../css/newdocs.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
|
|
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
|
|
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
|
|
|
|
<script src="../js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../js/toggleTable.js"></script>
|
|
</head>
|
|
<body onload="prettyPrint();">
|
|
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
|
|
aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
|
|
<li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
|
|
src="../img/external-link-icons/external-link-icon-white.png"></a>
|
|
</li>
|
|
<li><a href="http://www.visjs.org/blog.html">Blog</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
|
|
<li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
|
|
<li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
|
|
<li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
<div class="container full">
|
|
<h1>Network - selection</h1>
|
|
<p>Handles the selection of nodes and edges.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>The options for the selection have to be contained in an object titled 'selection'.</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="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
|
|
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
|
|
</ul>
|
|
<br>
|
|
<pre class="prettyprint lang-js options hidden" id="fullOptions">
|
|
var options = {
|
|
selection:{
|
|
select: true,
|
|
selectConnectedEdges: false
|
|
}
|
|
}
|
|
|
|
network.setOptions(options);
|
|
</pre>
|
|
<p>All of the individual options are explained here:</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
|
|
<tr><td>select</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
|
|
<tr><td>selectConnectedEdges</td> <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
|
|
</table>
|
|
|
|
<h3>Methods</h3>
|
|
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
|
|
<tr><td>getSelection()</td> <td class="mid">
|
|
<pre class="code">
|
|
{
|
|
nodes: [Array of selected nodeIds],
|
|
edges: [Array of selected edgeIds]
|
|
}</pre> </td><td>Returns an object with selected nodes and edges ids.</td></tr>
|
|
|
|
<tr><td>getSelectedNodes()</td> <td class="mid"><code>[nodeId1, nodeId2, ..]</code></td><td>Returns an array of selected node ids.</td></tr>
|
|
<tr><td>getSelectedEdges()</td> <td class="mid"><code>[edgeId1, edgeId2, ..]</code></td><td>Returns an array of selected edge ids.</td></tr>
|
|
<tr><td>getNodeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>)</td> <td class="mid">nodeId</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><td>getEdgeAt(<br> <code><i>{x: xPosition DOM,<br> y: yPosition DOM}</i></code><br>)</td> <td class="mid">edgeId</code></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><td>selectNodes(<br> <code><i>Array with nodeIds</i></code>,<br> <code><i>[Boolean highlightEdges]</i></code><br>)</td> <td class="mid">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><td>selectEdges(<br> <code><i>Array with edgeIds</i></code><br>)</td> <td class="mid">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><td>unselectAll()</td> <td class="mid">none</td> <td>Unselect all objects. <i>Does not fire events</i>.</td></tr>
|
|
</table>
|
|
|
|
<h3>Events</h3>
|
|
<p>The selection handler does not fire events. All related events are fired by the <a href="./interaction.html">interaction module</a> because they are triggered by user interaction.</p>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../js/ie10-viewport-bug-workaround.js"></script>
|