<!doctype html> <html> <head> <title>Network | Basic usage</title> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { width: 400px; height: 400px; border: 1px solid lightgray; } </style> </head> <body> <div id="mynetwork"></div> <script type="text/javascript"> // 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'}, {id: 6, label: 'Node 6', cid:1}, {id: 7, label: 'Node 7', cid:1}, {id: 8, label: 'Node 8', cid:1}, {id: 9, label: 'Node 9', cid:1}, {id: 10, label: 'Node 10', cid:1} ]; // 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 = {}; var network = new vis.Network(container, data, options); var clusterOptions = { joinCondition:function(parentOptions,childOptions) { return true; }, processClusterProperties: function (properties, childNodes, childEdges) { return properties; }, clusterNodeProperties: {id:'bla', borderWidth:2}, } var clusterOptionsByData = { joinCondition:function(childOptions) { return childOptions.cid == 1; }, processClusterProperties: function (properties, childNodes, childEdges) { return properties; }, clusterNodeProperties: {id:'bla', borderWidth:2} } // network.clusterByNodeData(clusterOptionsByData) network.clustering.clusterOutliers({clusterNodeProperties: {shape:'database',borderWidth:3}}) // network.clusterByConnection(2, clusterOptions); // network.clusterByConnection(9, { // joinCondition:function(parentOptions,childOptions) {return true;}, // processProperties:function (properties, childNodes, childEdges) { // return properties; // }, // clusterNodeProperties: {id:'bla2', label:"bla2", borderWidth:8} // }); network.body.emitter.on("select", function(params) { console.log("here1234") if (params.nodes.length == 1) { if (network.clustering.isCluster(params.nodes[0]) == true) { network.clustering.openCluster(params.nodes[0]) } } }) // network.openCluster('bla'); // network.openCluster('bla2'); </script> </body> </html>