|
|
- <!doctype html>
- <html>
- <head>
- <title>Network | Navigation</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
- table.legend_table {
- border-collapse: collapse;
- }
- table.legend_table td,
- table.legend_table th {
- border: 1px solid #d3d3d3;
- padding: 10px;
- }
-
- table.legend_table td {
- text-align: center;
- width:110px;
- }
- </style>
-
- <script type="text/javascript" src="../../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../../dist/vis.js"></script>
- <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
-
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
-
- function draw() {
- destroy();
-
- // create an array with nodes
- var nodes = [
- {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: 1},
- {from: 1, to: 3},
- {from: 1, to: 2},
- {from: 2, to: 4},
- {from: 2, to: 5}
- ]);
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
- interaction: {
- navigationButtons: true,
- keyboard: true
- }
- };
- network = new vis.Network(container, data, options);
-
- // add event listeners
- network.on('select', function(params) {
- document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
- });
- }
- </script>
- <script src="../../../googleAnalytics.js"></script>
- </head>
-
- <body onload="draw();">
- <h2>Navigation controls and keyboad navigation</h2>
- <div style="width: 800px; font-size:14px; text-align: justify;">
- This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
- <table class="legend_table">
- <tr>
- <th>Icons: </th>
- <td><img src="../../../../dist/img/network/upArrow.png" /> </td>
- <td><img src="../../../../dist/img/network/downArrow.png" /> </td>
- <td><img src="../../../../dist/img/network/leftArrow.png" /> </td>
- <td><img src="../../../../dist/img/network/rightArrow.png" /> </td>
- <td><img src="../../../../dist/img/network/plus.png" /> </td>
- <td><img src="../../../../dist/img/network/minus.png" /> </td>
- <td><img src="../../../../dist/img/network/zoomExtends.png" /> </td>
- </tr>
- <tr>
- <th>Keyboard shortcuts:</th>
- <td><div>Up arrow</div></td>
- <td><div>Down arrow</div></td>
- <td><div>Left arrow</div></td>
- <td><div>Right arrow</div></td>
- <td><div>=<br />[<br />Page up</div></td>
- <td><div>-<br />]<br />Page down</div></td>
- <td><div>None</div></td>
- </tr>
- <tr>
- <th>Description:</th>
- <td>Move up</td>
- <td>Move down</td>
- <td>Move left</td>
- <td>Move right</td>
- <td>Zoom in</td>
- <td>Zoom out</td>
- <td>Zoom extent</td>
- </tr>
- </table>
- <br />
- Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
- Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
- The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
- </div>
-
- <div id="mynetwork"></div>
-
- <p id="selection"></p>
- </body>
- </html>
|
