|
|
- <!doctype html>
- <html>
- <head>
- <title>Network | Basic usage</title>
-
- <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: 1400px;
- height: 1000px;
- border: 1px solid lightgray;
- }
- </style>
- <script type="text/javascript">
- </script>
- </head>
-
- <body>
- <my-toolbar>
- <button id="toggleAddNode">add Nodes</button>
- <button id="btnDelete">delete</button>
- <!-- other Vis manipulation buttons -->
- <button id="togglePhysics">pause Physics</button>
- <button id="togglePin">toggle pin</button>
- </my-toolbar>
- <div id="mynetwork"></div>
- <script>
- document.getElementById("toggleAddNode").onclick = addNode;
- document.getElementById("btnDelete").onclick = visDelete;
- document.getElementById("togglePhysics").onclick = togglePhysics;
- document.getElementById("togglePin").onclick = togglePin;
-
- function storePositions() {
- network.storePositions();
- }
-
- var inAddNodeMode = false;
-
- function addNode() {
- if (inAddNodeMode) {
- network.disableEditMode();
- inAddNodeMode = false;
- } else {
- network.addNodeMode();
- inAddNodeMode = true;
- }
- }
-
- function visDelete() {
- network.deleteSelected();
- }
-
- function togglePhysics() {
- isPhysicsEnabled = !isPhysicsEnabled;
- network.setOptions({
- physics: isPhysicsEnabled
- });
- }
- var isPhysicsEnabled = true;
-
- function togglePin() {
- network.storePositions();
- // update node.fixed
- }
-
- // 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');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
- manipulation: {
- enabled: false,
- initiallyActive: false,
- addNode: false,
- //addEdge: onConnectEdge,
- //editNode: onEditNode,
- //editEdge: true,
- deleteNode: onDelete,
- // this is false, but the manipulation api can still delete edges
- deleteEdge: false
- }
- };
-
- function onAddNode(nodeToBeAdded, callback) {
- //$log.debug('onAdd', nodeToBeAdded);
- console.log('onAdd');
- // do stuff to the new node
- inAddNodeMode = false;
- callback(nodeToBeAdded);
- }
-
- function onDelete(toBeDeletedData, callback) {
- console.log('deleting data', toBeDeletedData);
- // toBeDeletedData is object with nodes: [] and edges: []
-
- callback(toBeDeletedData);
- }
-
-
- var network = new vis.Network(container, data, options);
- </script>
- </body>
- </html>
|
