diff options
Diffstat (limited to 'www/lib/vis/examples/network/other')
10 files changed, 391 insertions, 11 deletions
diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html index d68ef75e..1e0d82ae 100644 --- a/www/lib/vis/examples/network/other/animationShowcase.html +++ b/www/lib/vis/examples/network/other/animationShowcase.html @@ -36,7 +36,7 @@ <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" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html new file mode 100644 index 00000000..145dcb72 --- /dev/null +++ b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html @@ -0,0 +1,107 @@ +<!doctype html> +<html> +<head> + <title>Network | Clustering</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + p { + max-width:600px; + } + + h4 { + margin-bottom:3px; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + + +<p> +Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li> +<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li> +<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li> +</ul> +</p> + +<div id="mynetwork"></div> +<pre id="eventSpan"></pre> + +<script type="text/javascript"> + // create an array with nodes + var nodes = [ + {id: 1, label: 'Node 1', color:'orange'}, + {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}}, + {id: 3, label: 'Node 3', color:'orange'}, + {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}}, + {id: 5, label: 'Node 5', color:'orange'}, + {id: 6, label: 'cid = 1', cid:1, color:'orange'}, + {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}}, + {id: 8, label: 'cid = 1', cid:1, color:'lime'}, + {id: 9, label: 'cid = 1', cid:1, color:'orange'}, + {id: 10, label: 'cid = 1', cid:1, color:'lime'} + ]; + + // create an array with edges + var edges = [ + {from: 1, to: 2}, + {from: 1, to: 3}, + {from: 10, to: 4}, + {from: 2, to: 5}, + {from: 6, to: 2}, + {from: 7, to: 5}, + {from: 8, to: 6}, + {from: 9, to: 7}, + {from: 10, to: 9} + ]; + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {layout:{randomSeed:8}}; + var network = new vis.Network(container, data, options); + var clusterOptionsByData = { + joinCondition:function(childOptions) { + return childOptions.cid == 1; + }, + clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'} + }; + network.cluster(clusterOptionsByData); + + network.on("selectNode", function(params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'}); + } + } + }); + + network.on("selectEdge", function(params) { + if (params.edges.length == 1) { + // Single edge selected + var obj = {}; + obj.clicked_id = params.edges[0]; + network.clustering.updateEdge(params.edges[0], {color : '#aa0000'}); + obj.base_edge = network.clustering.getBaseEdge(params.edges[0]); + obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]); + document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4); + } + }); + + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html index 2f2eb8eb..bd68c42f 100644 --- a/www/lib/vis/examples/network/other/clustering.html +++ b/www/lib/vis/examples/network/other/clustering.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html index f7f8fa5a..e2391f16 100644 --- a/www/lib/vis/examples/network/other/clusteringByZoom.html +++ b/www/lib/vis/examples/network/other/clusteringByZoom.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clustersOfclusters.html b/www/lib/vis/examples/network/other/clustersOfclusters.html new file mode 100644 index 00000000..0e90bcf0 --- /dev/null +++ b/www/lib/vis/examples/network/other/clustersOfclusters.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Cluster Test</title> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <style type="text/css"> + #network_graph { + width: 1000px; + height: 800px; + border: 1px solid lightgray; + } + </style> +</head> +<body onload="draw()"> +<p> + Clusters can contain other clusters, but clusters of a single node is only possible by adding +<pre>allowSingleNodeCluster: true</pre> +to clusterNodeProperties<br/> +In this example repeatedly clicking on the node with open the Clusters. +</p> +<div id="network_graph"></div> +<div id="info"></div> +<script type="text/javascript"> + var network; + + var node_color = ['orange', 'green', 'red', 'yellow', 'cyan']; + var node_shape = ['star', 'database', 'diamond', 'square', 'triangle']; + var nodes = new vis.DataSet([ + {id: 'x', label: 'Node X'}, + {id: 'y', label: 'Node Y'}, + ]); + var network_options = {}; + var edges = new vis.DataSet([ + {from: 'x', to: 'y'} + ]); + + var cluster_id = 1; + + function draw() { + network = new vis.Network( + document.getElementById('network_graph'), + { + nodes: nodes, + edges: edges + }, + network_options + ); + network.on('click', function (params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.openCluster(params.nodes[0]); + } + } + }); + cluster(); + cluster(); + cluster(); + } + + function cluster() { + var clusterOptions = { + joinCondition: function (childOptions) { + console.log(childOptions); + return true; + }, + clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true} + }; + cluster_id++; + network.cluster(clusterOptions); + } +</script> +</body> +</html> diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html index 74bf9e79..a13470d4 100644 --- a/www/lib/vis/examples/network/other/configuration.html +++ b/www/lib/vis/examples/network/other/configuration.html @@ -29,7 +29,7 @@ <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" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html index c2b34cd9..b399c098 100644 --- a/www/lib/vis/examples/network/other/manipulation.html +++ b/www/lib/vis/examples/network/other/manipulation.html @@ -1,6 +1,7 @@ <!doctype html> <html> <head> + <meta charset="utf-8"/> <title>Network | Manipulation</title> <style type="text/css"> @@ -54,7 +55,7 @@ </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" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -64,6 +65,17 @@ var data = getScaleFreeNetwork(25); var seed = 2; + function setDefaultLocale() { + var defaultLocal = navigator.language; + var select = document.getElementById('locale'); + select.selectedIndex = 0; // set fallback value + for (var i = 0, j = select.options.length; i < j; ++i) { + if (select.options[i].getAttribute('value') === defaultLocal) { + select.selectedIndex = i; + break; + } + } + } function destroy() { if (network !== null) { @@ -135,11 +147,16 @@ callback(data); } + function init() { + setDefaultLocale(); + draw(); + } + </script> <script src="../../googleAnalytics.js"></script> </head> -<body onload="draw();"> +<body onload="init();"> <h2>Editing the nodes and edges (localized)</h2> <p style="width: 700px; font-size:14px; text-align: justify;"> The localization is only relevant to the manipulation buttons. @@ -148,8 +165,13 @@ <p> <label for="locale">Select a locale:</label> <select id="locale" onchange="draw();"> - <option value="en" selected>en</option> + <option value="en">en</option> + <option value="de">de</option> + <option value="es">es</option> + <option value="it">it</option> <option value="nl">nl</option> + <option value="pt-br">pt</option> + <option value="ru">ru</option> </select> </p> @@ -169,4 +191,3 @@ </body> </html> - diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html index 3d7eda25..760bb539 100644 --- a/www/lib/vis/examples/network/other/navigation.html +++ b/www/lib/vis/examples/network/other/navigation.html @@ -29,7 +29,7 @@ <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" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -124,7 +124,7 @@ </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> + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> 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> diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html index 4d67fcc5..0b3ea663 100644 --- a/www/lib/vis/examples/network/other/performance.html +++ b/www/lib/vis/examples/network/other/performance.html @@ -24,7 +24,7 @@ <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" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/saveAndLoad.html b/www/lib/vis/examples/network/other/saveAndLoad.html new file mode 100644 index 00000000..08165c85 --- /dev/null +++ b/www/lib/vis/examples/network/other/saveAndLoad.html @@ -0,0 +1,177 @@ +<!doctype html> +<html> + <head> + <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> + <meta content="utf-8" http-equiv="encoding"> + <title>Network | Saving and loading networks</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + #network { + float:left; + width: 600px; + height: 600px; + margin:5px; + border: 1px solid lightgray; + } + #config { + float:left; + width: 400px; + height: 600px; + } + #input_output { + height: 10%; + width: 15%; + } + + p { + font-size:16px; + max-width:700px; + } + </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 src="../../googleAnalytics.js"></script> + </head> + + <body> + <p> + In this example, the network data can be exported to JSON and imported back into the network. + + Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed. + </p> + + <div id="network"></div> + + <div> + <textarea id=input_output></textarea> + <input type="button" id="import_button" onclick="importNetwork()" value="import"></input> + <input type="button" id="export_button" onclick="exportNetwork()" value="export"></input> + <input type="button" id="destroy_button" onclick="destroyNetwork()" value="destroy"></input> + </div> + + <script type="text/javascript"> + var network; + var container; + var exportArea; + var importButton; + var exportButton; + + function init() { + container = document.getElementById('network'); + exportArea = document.getElementById('input_output'); + importButton = document.getElementById('import_button'); + exportButton = document.getElementById('export_button'); + + draw(); + } + + function addContextualInformation(elem, index, array) { + addId(elem, index); + addConnections(elem, index); + } + + function addId(elem, index) { + elem.id = index; + } + + function addConnections(elem, index) { + // need to replace this with a tree of the network, then get child direct children of the element + elem.connections = network.getConnectedNodes(index); + } + + function destroyNetwork() { + network.destroy(); + } + + function clearOutputArea() { + exportArea.value = ""; + } + + function draw() { + // create a network of nodes + var data = getScaleFreeNetwork(5); + + network = new vis.Network(container, data, {manipulation:{enabled:true}}); + + clearOutputArea(); + } + + function exportNetwork() { + clearOutputArea(); + + var nodes = objectToArray(network.getPositions()); + + nodes.forEach(addContextualInformation); + + // pretty print node data + var exportValue = JSON.stringify(nodes, undefined, 2); + + exportArea.value = exportValue; + + resizeExportArea(); + } + + function importNetwork() { + var inputValue = exportArea.value; + var inputData = JSON.parse(inputValue); + + var data = { + nodes: getNodeData(inputData), + edges: getEdgeData(inputData) + } + + network = new vis.Network(container, data, {}); + + resizeExportArea(); + } + + function getNodeData(data) { + var networkNodes = []; + + data.forEach(function(elem, index, array) { + networkNodes.push({id: elem.id, label: elem.id, x: elem.x, y: elem.y}); + }); + + return new vis.DataSet(networkNodes); + } + + function getEdgeData(data) { + var networkEdges = []; + + data.forEach(function(node, index, array) { + // add the connection + node.connections.forEach(function(connId, cIndex, conns) { + networkEdges.push({from: node.id, to: connId}); + + var elementConnections = array[connId].connections; + + // remove the connection from the other node to prevent duplicate connections + var duplicateIndex = elementConnections.findIndex(function(connection) { + connection === node.id; + }); + + elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length)) + }); + }); + + return new vis.DataSet(networkEdges); + } + + function objectToArray(obj) { + return Object.keys(obj).map(function (key) { return obj[key]; }); + } + + function resizeExportArea() { + exportArea.style.height = (1 + exportArea.scrollHeight) + "px"; + } + + init(); + </script> + </body> +</html>
\ No newline at end of file |