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.
196 lines
13 KiB
196 lines
13 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 - 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="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
|
|
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
|
|
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><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,
|
|
zoomView: true,
|
|
hoverEnabled: false,
|
|
navigationButtons: false,
|
|
tooltipDelay: 300,
|
|
keyboard: {
|
|
enabled: false,
|
|
speed: {x: 10, y: 10, zoom: 0.02},
|
|
bindToWindow: 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="moduleTable" id="optionTable">
|
|
<tr class="header"><td class="name">name</td><td class="type">type</td><td class="default">default</td><td class="description">description</td></tr>
|
|
<tr><td>dragNodes</td> <td class="mid">Boolean</td> <td class="mid"><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 class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When true, the view can be dragged around by the user.</td></tr>
|
|
<tr><td>zoomView</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>When true, the user can zoom in.</td></tr>
|
|
<tr><td>hoverEnabled</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
|
|
<tr><td>navigationButtons</td> <td class="mid">Boolean</td> <td class="mid"><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>tooltipDelay</td> <td class="mid">Object</td> <td class="mid"><code>Object</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 class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td> <td class="mid">Object or Boolean</td> <td class="mid"><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 class="mid">Boolean</td> <td class="mid"><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 class="mid">Number</td> <td class="mid"><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 class="mid">Number</td> <td class="mid"><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 class="mid">Number</td> <td class="mid"><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 class="mid">Boolean</td> <td class="mid"><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>
|
|
</table>
|
|
|
|
<h3>Methods</h3>
|
|
<p>The interaction module has no methods.</p>
|
|
|
|
<h3>Events</h3>
|
|
<p>These events are fired by the interaction module. They are related to user input.</p>
|
|
<table class="moduleTable">
|
|
<tr class="header"><td class="eventName">name</td><td class="eventProperties">properties</td><td>description</td></tr>
|
|
<tr><td>click</td> <td class="mid">
|
|
<pre class="code">
|
|
{
|
|
nodes: [Array of selected nodeIds],
|
|
edges: [Array of selected edgeIds],
|
|
pointer: {
|
|
DOM: {x:pointer_x, y:pointer_y},
|
|
canvas: {x:canvas_x, y:canvas_y}
|
|
}
|
|
}
|
|
</pre>
|
|
</td><td>Fired when the user clicks the mouse or taps on a touchscreen device.</td></tr>
|
|
<tr><td>doubleClick</td> <td class="mid">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>rightClick</td> <td class="mid">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 <a href="./selection.html">getNodeAt</a> to select the node if you want.</td></tr>
|
|
<tr><td>hold</td> <td class="mid">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>release</td> <td class="mid">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>select</td> <td class="mid">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 triggerd on click and hold</b>.</td></tr>
|
|
<tr><td>selectNode</td> <td class="mid">same as <code>click</code>.</td><td>Fired when a node has been selected by the user.</td></tr>
|
|
<tr><td>selectEdge</td> <td class="mid">same as <code>click</code>.</td><td>Fired when a edge has been selected by the user.</td></tr>
|
|
<tr><td>deselectNode</td><td class="mid"><pre class="code">
|
|
{
|
|
nodes: [Array of selected nodeIds],
|
|
edges: [Array of selected edgeIds],
|
|
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><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.</td></tr>
|
|
<tr><td>deselectEdge</td><td class="mid">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>dragStart</td> <td class="mid">same as <code>click</code>.</td><td>Fired when starting a drag.</td></tr>
|
|
<tr><td>dragEnd</td> <td class="mid">same as <code>click</code>.</td><td>Fired when the drag has finished.</td></tr>
|
|
<tr><td>zoom</td> <td class="mid"><code>{direction:'+'/'-'}</code></td><td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in.</td></tr>
|
|
<tr><td>showPopup</td> <td class="mid"><code>id of item corresponding to popup</code></td><td>Fired when the popup is shown.</td></tr>
|
|
<tr><td>hidePopup</td> <td class="mid">none</td> <td>Fired when the popup is hidden.</td></tr>
|
|
</table>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../js/ie10-viewport-bug-workaround.js"></script>
|