diff options
Diffstat (limited to 'www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html')
| -rw-r--r-- | www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html deleted file mode 100644 index 145dcb72..00000000 --- a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html +++ /dev/null @@ -1,107 +0,0 @@ -<!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> |
