diff --git a/examples/network/20_navigation.html b/examples/network/20_navigation.html
index 4f271be1..8244a0b0 100644
--- a/examples/network/20_navigation.html
+++ b/examples/network/20_navigation.html
@@ -14,23 +14,17 @@
border: 1px solid lightgray;
}
table.legend_table {
- font-size: 11px;
- border-width:1px;
- border-color:#d3d3d3;
- border-style:solid;
+ border-collapse: collapse;
}
- table.legend_table,td {
- border-width:1px;
- border-color:#d3d3d3;
- border-style:solid;
- padding: 2px;
+ table.legend_table td,
+ table.legend_table th {
+ border: 1px solid #d3d3d3;
+ padding: 10px;
}
- div.table_content {
- width:80px;
- text-align:center;
- }
- div.table_description {
- width:100px;
+
+ table.legend_table td {
+ text-align: center;
+ width:110px;
}
@@ -52,51 +46,23 @@
function draw() {
destroy();
- nodes = [];
- edges = [];
- var connectionCount = [];
-
- // randomly create some nodes and edges
- var nodeCount = document.getElementById('nodeCount').value;
- for (var i = 0; i < nodeCount; i++) {
- nodes.push({
- id: i,
- label: String(i)
- });
-
- connectionCount[i] = 0;
-
- // create edges in a scale-free-network way
- if (i == 1) {
- var from = i;
- var to = 0;
- edges.push({
- from: from,
- to: to
- });
- connectionCount[from]++;
- connectionCount[to]++;
- }
- else if (i > 1) {
- var conn = edges.length * 2;
- var rand = Math.floor(Math.random() * conn);
- var cum = 0;
- var j = 0;
- while (j < connectionCount.length && cum < rand) {
- cum += connectionCount[j];
- j++;
- }
-
- var from = i;
- var to = j;
- edges.push({
- from: from,
- to: to
- });
- connectionCount[from]++;
- connectionCount[to]++;
- }
- }
+ // 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');
@@ -105,7 +71,10 @@
edges: edges
};
var options = {
- interaction:{navigationButtons: true},
+ interaction: {
+ navigationButtons: true,
+ keyboard: true
+ }
};
network = new vis.Network(container, data, options);
@@ -115,7 +84,8 @@
});
}
-
+
+
Navigation controls and keyboad navigation
@@ -123,51 +93,41 @@
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below.
-
Icons:
-
-
-
-
-
-
-
+
Icons:
+
+
+
+
+
+
+
-
Keyboard shortcuts:
-
Up arrow
-
Down arrow
-
Left arrow
-
Right arrow
-
= [ Page up
-
- ] Page down
-
None
+
Keyboard shortcuts:
+
Up arrow
+
Down arrow
+
Left arrow
+
Right arrow
+
= [ Page up
+
- ] Page down
+
None
-
Description:
-
Move up
-
Move down
-
Move left
-
Move right
-
Zoom in
-
Zoom out
-
Zoom extent
+
Description:
+
Move up
+
Move down
+
Move left
+
Move right
+
Zoom in
+
Zoom out
+
Zoom extent
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. To correctly display the navigation icons, the vis.css file must be included.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
-
-
-
-
-
-
diff --git a/examples/network/21_data_manipulation.html b/examples/network/21_data_manipulation.html
index c3fac9a6..7a07b9f8 100644
--- a/examples/network/21_data_manipulation.html
+++ b/examples/network/21_data_manipulation.html
@@ -114,7 +114,9 @@
edges: edges
};
var options = {
- stabilize: false,
+ physics: {
+ stabilization: false
+ },
manipulation: true
};
network = new vis.Network(container, data, options);
@@ -148,7 +150,8 @@
}
}
-
+
+
Editing the dataset
diff --git a/examples/network/22_les_miserables.html b/examples/network/22_les_miserables.html
index 7459f90f..cb650b65 100644
--- a/examples/network/22_les_miserables.html
+++ b/examples/network/22_les_miserables.html
@@ -1,7 +1,7 @@
-
+
- Network | Multiline text
+ Network | Les miserables