<!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> </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>