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