diff --git a/examples/network/27_world_cup_network.html b/examples/network/27_world_cup_network.html index da8c1a94..5f039e8f 100644 --- a/examples/network/27_world_cup_network.html +++ b/examples/network/27_world_cup_network.html @@ -63,8 +63,8 @@ Roundness (0..1): Hide edges on drag:
-Hide nodes on drag: + id="hideEdgesOnDrag" />
+Hide nodes on drag:
@@ -101,17 +101,17 @@ Hide nodes on drag: }, font: { size: 12, - face: "Tahoma" + face: 'Tahoma' } }, edges: { width: 0.15, color: { - inherit: (inheritColorVal == "false") ? false : inheritColorVal + inherit: (inheritColorVal == 'false') ? false : inheritColorVal }, smooth: { dynamic: false, - type: "continuous" + type: 'continuous' } }, interaction: { @@ -125,23 +125,26 @@ Hide nodes on drag: // Note: data is coming from ./data/WorldCup2014.js network = new vis.Network(container, data, options); - network.fit({animation: false}); + network.fit({duration: 0}); } function update() { var type = dropdown.value; - var roundness = roundnessSlider.value; + var roundness = parseFloat(roundnessSlider.value); roundnessScreen.value = roundness; + var options = { edges: { smooth: { type: type, roundness: roundness } + }, + rendering: { + hideEdgesOnDrag: hideEdgesOnDrag.checked, + hideNodesOnDrag: hideNodesOnDrag.checked } }; - options.rendering.hideEdgesOnDrag = hideEdgesOnDrag.checked; - options.rendering.hideNodesOnDrag = hideNodesOnDrag.checked; network.setOptions(options); } diff --git a/examples/network/28_world_cup_network_performance.html b/examples/network/28_world_cup_network_performance.html index f6e85826..57eb213a 100644 --- a/examples/network/28_world_cup_network_performance.html +++ b/examples/network/28_world_cup_network_performance.html @@ -54,32 +54,37 @@ var options = { nodes: { shape: 'dot', - radiusMin: 10, - radiusMax: 30, - fontSize: 12, - fontFace: "Tahoma" + scaling: { + min: 10, + max: 30 + }, + font: { + size: 12, + face: 'Tahoma' + } }, edges: { width: 0.15, - inheritColor: "from" - }, - tooltip: { - delay: 200, - fontSize: 12, - color: { - background: "#fff" + color: {inherit: 'from'}, + smooth: { + dynamic: false, + type: 'continuous' } }, - stabilize: false, - smoothCurves: {dynamic: false, type: "continuous"}, physics: { + stabilization: false, barnesHut: { gravitationalConstant: -80000, springConstant: 0.001, springLength: 200 } }, - hideEdgesOnDrag: true + interaction: { + tooltipDelay: 200 + }, + rendering: { + hideEdgesOnDrag: true + } }; // Note: data is coming from ./data/WorldCup2014.js diff --git a/examples/network/29_neighbourhood_highlight.html b/examples/network/29_neighbourhood_highlight.html index 704cf333..500f3e73 100644 --- a/examples/network/29_neighbourhood_highlight.html +++ b/examples/network/29_neighbourhood_highlight.html @@ -1,42 +1,42 @@ - Network | Static smooth curves - World Cup Network + Network | Static smooth curves - World Cup Network - - + + - + - - + +

Dynamic Data - Neighbourhood Highlight

- This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes. - In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not - they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..). -

+ This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes. + In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not + they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..). +

diff --git a/examples/network/30_importing_from_gephi.html b/examples/network/30_importing_from_gephi.html index 7d070dd7..9aa17d93 100644 --- a/examples/network/30_importing_from_gephi.html +++ b/examples/network/30_importing_from_gephi.html @@ -84,15 +84,15 @@ var nodes = new vis.DataSet(); var edges = new vis.DataSet(); var gephiImported; - var allowedToMoveCheckbox = document.getElementById("allowedToMove"); + var allowedToMoveCheckbox = document.getElementById('allowedToMove'); allowedToMoveCheckbox.onchange = redrawAll; - var parseColorCheckbox = document.getElementById("parseColor"); + var parseColorCheckbox = document.getElementById('parseColor'); parseColorCheckbox.onchange = redrawAll; - var nodeContent = document.getElementById("nodeContent"); + var nodeContent = document.getElementById('nodeContent'); - loadJSON("./data/WorldCup2014.json", redrawAll); + loadJSON('./data/WorldCup2014.json', redrawAll); var container = document.getElementById('mynetwork'); var data = { @@ -103,17 +103,17 @@ nodes: { shape: 'dot', font: { - face: "Tahoma" + face: 'Tahoma' } }, edges: { width: 0.15, color: { - inherit: "from" + inherit: 'from' }, smooth: { dynamic: false, - type: "continuous" + type: 'continuous' } }, interaction: { @@ -199,7 +199,7 @@ } } }; - xhr.open("GET", path, true); + xhr.open('GET', path, true); xhr.send(); } diff --git a/examples/network/31_localization.html b/examples/network/31_localization.html index dfa5daf3..655b306d 100644 --- a/examples/network/31_localization.html +++ b/examples/network/31_localization.html @@ -125,45 +125,48 @@ physics: { stabilization: false }, - manipulation: true, - onAdd: function(data,callback) { - var span = document.getElementById('operation'); - var idInput = document.getElementById('node-id'); - var labelInput = document.getElementById('node-label'); - var saveButton = document.getElementById('saveButton'); - var cancelButton = document.getElementById('cancelButton'); - var div = document.getElementById('network-popUp'); - span.innerHTML = "Add Node"; - idInput.value = data.id; - labelInput.value = data.label; - saveButton.onclick = saveData.bind(this,data,callback); - cancelButton.onclick = clearPopUp.bind(); - div.style.display = 'block'; - }, - onEdit: function(data,callback) { - var span = document.getElementById('operation'); - var idInput = document.getElementById('node-id'); - var labelInput = document.getElementById('node-label'); - var saveButton = document.getElementById('saveButton'); - var cancelButton = document.getElementById('cancelButton'); - var div = document.getElementById('network-popUp'); - span.innerHTML = "Edit Node"; - idInput.value = data.id; - labelInput.value = data.label; - saveButton.onclick = saveData.bind(this,data,callback); - cancelButton.onclick = clearPopUp.bind(); - div.style.display = 'block'; - }, - onConnect: function(data,callback) { - if (data.from == data.to) { - var r=confirm("Do you want to connect the node to itself?"); - if (r==true) { - callback(data); + manipulation: { + //handlerFunctions: { + addNode: function(data,callback) { + var span = document.getElementById('operation'); + var idInput = document.getElementById('node-id'); + var labelInput = document.getElementById('node-label'); + var saveButton = document.getElementById('saveButton'); + var cancelButton = document.getElementById('cancelButton'); + var div = document.getElementById('network-popUp'); + span.innerHTML = "Add Node"; + idInput.value = data.id; + labelInput.value = data.label; + saveButton.onclick = saveData.bind(this,data,callback); + cancelButton.onclick = clearPopUp.bind(); + div.style.display = 'block'; + }, + editNode: function(data,callback) { + var span = document.getElementById('operation'); + var idInput = document.getElementById('node-id'); + var labelInput = document.getElementById('node-label'); + var saveButton = document.getElementById('saveButton'); + var cancelButton = document.getElementById('cancelButton'); + var div = document.getElementById('network-popUp'); + span.innerHTML = "Edit Node"; + idInput.value = data.id; + labelInput.value = data.label; + saveButton.onclick = saveData.bind(this,data,callback); + cancelButton.onclick = clearPopUp.bind(); + div.style.display = 'block'; + }, + addEdge: function(data,callback) { + if (data.from == data.to) { + var r=confirm("Do you want to connect the node to itself?"); + if (r==true) { + callback(data); + } + } + else { + callback(data); + } } - } - else { - callback(data); - } + //} } }; network = new vis.Network(container, data, options); @@ -187,7 +190,6 @@ function saveData(data,callback) { var idInput = document.getElementById('node-id'); var labelInput = document.getElementById('node-label'); - var div = document.getElementById('network-popUp'); data.id = idInput.value; data.label = labelInput.value; clearPopUp(); @@ -199,7 +201,9 @@ var select = document.getElementById('locale'); select.onchange = function () { network.setOptions({ - locale: this.value + manipulation: { + locale: this.value + } }); }; select.onchange(); @@ -225,13 +229,13 @@
node
- + - +
idid
label label
- - + +

diff --git a/examples/network/39_newClustering.html b/examples/network/39_newClustering.html index 7f62102c..2c666ed2 100644 --- a/examples/network/39_newClustering.html +++ b/examples/network/39_newClustering.html @@ -13,7 +13,8 @@ border: 1px solid lightgray; } - + +