diff --git a/examples/network/12_arrows.html b/examples/network/12_arrows.html new file mode 100644 index 00000000..9e43243e --- /dev/null +++ b/examples/network/12_arrows.html @@ -0,0 +1,69 @@ + + + + Network | Arrows + + + + + + + + + + + +

+ This example shows the different options for arrows. +

+ +
+ + diff --git a/examples/network/14_dot_language.html b/examples/network/14_dot_language.html index 4be5f083..5cb44e80 100644 --- a/examples/network/14_dot_language.html +++ b/examples/network/14_dot_language.html @@ -4,8 +4,12 @@ - + + +

+ Network supports the DOT language. +

+ + @@ -113,7 +114,13 @@ // create a network var container = document.getElementById('mynetwork'); - var options = {}; + var options = { + physics: { + barnesHut: { + springLength: 200 + } + } + }; network = new vis.Network(container, data, options); } catch (err) { diff --git a/examples/network/16_dynamic_data.html b/examples/network/16_dynamic_data.html index c8cb11af..305c4780 100644 --- a/examples/network/16_dynamic_data.html +++ b/examples/network/16_dynamic_data.html @@ -168,7 +168,8 @@ network = new vis.Network(container, data, options); }); - + + diff --git a/examples/network/17_network_info.html b/examples/network/17_network_info.html index 8072c827..83fa4dd6 100644 --- a/examples/network/17_network_info.html +++ b/examples/network/17_network_info.html @@ -111,11 +111,14 @@ edges: edges }; var options = { - stabilize: false, // stabilize positions before displaying nodes: { - radiusMin: 16, - radiusMax: 32, - fontColor: BLACK + scaling: { + min: 16, + max: 32 + }, + font: { + color: BLACK + } }, edges: { color: GRAY @@ -146,7 +149,8 @@ network = new vis.Network(container, data, options); } - + + diff --git a/examples/network/18_fully_random_nodes_clustering.html b/examples/network/18_fully_random_nodes_clustering.html index 854969ff..4f1e565e 100644 --- a/examples/network/18_fully_random_nodes_clustering.html +++ b/examples/network/18_fully_random_nodes_clustering.html @@ -77,7 +77,8 @@ }); } - + +

Clustering - Fully random network

diff --git a/examples/network/19_scale_free_graph_clustering.html b/examples/network/19_scale_free_graph_clustering.html index a3d4c557..c68b13db 100644 --- a/examples/network/19_scale_free_graph_clustering.html +++ b/examples/network/19_scale_free_graph_clustering.html @@ -101,7 +101,8 @@ }); } - + +

Clustering - Scale-Free-Network

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 upMove downMove leftMove rightZoom inZoom outZoom 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