You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
10 KiB
182 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" HREF="favicon.ico">
|
|
<title>vis.js - A dynamic, browser based visualization library.</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../css/bootstrap.css" rel="stylesheet">
|
|
<link href="../css/newdocs.css" rel="stylesheet">
|
|
|
|
<link href="../css/prettify.css" type="text/css" rel="stylesheet" />
|
|
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
|
|
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
<script src="../js/smooth-scroll.min.js"></script>
|
|
<script language="JavaScript">
|
|
smoothScroll.init();
|
|
</script>
|
|
|
|
<style>
|
|
td.properties {
|
|
width:350px;
|
|
}
|
|
|
|
td.name {
|
|
width:180px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<!-- NAVBAR
|
|
================================================== -->
|
|
<body onload="prettyPrint();">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="container">
|
|
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="../index.html#modules">Modules</a></li>
|
|
<li><a href="../blog.html">Blog</a></li>
|
|
<li><a href="../index.html#download_install">Download</a></li>
|
|
<li><a href="../showcase/index.html">Showcase</a></li>
|
|
<li><a href="../index.html#contribute">Contribute</a></li>
|
|
<li><a href="../featureRequests.html">Feature requests</a></li>
|
|
<li><a href="../index.html#licenses">License</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
<div class="container full">
|
|
<h1>Network - clustering</h1>
|
|
<p>Handles the HTML part of the canvas.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>Clustering has no options, everything is done with methods.</p>
|
|
|
|
|
|
<h3>Methods</h3>
|
|
<p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
|
|
<table>
|
|
<tr class="header"><td class="name">name</td><td>returns</td><td>description</td></tr>
|
|
<tr><td>findNode(<br>
|
|
<code>String nodeId</code><br>)</td> <td class="mid">Array</td> <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example: <br>
|
|
cluster 'A' contains cluster 'B',<br>
|
|
cluster 'B' contains cluster 'C',<br>
|
|
cluster 'C' contains node 'fred'.<br>
|
|
<code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>.
|
|
</td></tr>
|
|
<tr><td>isCluster(<br>
|
|
<code>String nodeId</code><br>)</td> <td class="mid">Boolean</td> <td>Returns true if the node whose ID has been supplied is a cluster.</td></tr>
|
|
<tr><td>openCluster(<br>
|
|
<code>String nodeId</code><br>)</td> <td class="mid">none</td> <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster edges.</td></tr>
|
|
<tr><td>cluster(<br>
|
|
<code>Object options</code><br>)</td> <td class="mid">none</td> <td>The options object is explained in full <a data-scroll="" data-options="{ "easing": "easeInCubic" }" href="#optionsObject">below</a>. The joinCondition function is presented with all nodes.</td></tr>
|
|
<tr><td>clusterByConnection(<br>
|
|
<code>String nodeId</code>,<br>
|
|
<code>[Object options]</code><br>
|
|
)</td> <td class="mid">none</td> <td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The behaviour can be customized by proving the options object. All options of this object are explained <a data-scroll="" data-options="{ "easing": "easeInCubic" }" href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes.</td></tr>
|
|
<tr><td>clusterByHubsize(<br>
|
|
<code>Number hubsize</code>,<br>
|
|
<code>[Object options]</code><br>)</td><td class="mid">none</td> <td>This method checks all nodes in the network and those with a equal or higher amount of edges than specified with the <code>hubsize</code> qualify. Cluster by connection is performed on each of them. The options object is described for <code>clusterByConnection</code> and does the same here.</td></tr>
|
|
|
|
<tr><td>clusterOutliers(<br>
|
|
<code>[Object options]</code><br>)</td><td class="mid">none</td> <td>This method will cluster all nodes with 1 edge with their respective connected node.</td></tr>
|
|
</table>
|
|
<br>
|
|
<h4 id="optionsObject">Cluster options object</h4>
|
|
<p>The options object supplied to the cluster functions can contain these properties:</p>
|
|
<table>
|
|
<tr class="header"><td class="name">name</td><td>Type</td><td>description</td></tr>
|
|
<tr><td>joinCondition(<br> <code>Object nodeOptions</code><br>)</td> <td class="mid">Function</td>
|
|
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument.
|
|
If this function returns true, this node will be added to the cluster. You have access to all options (including the default)
|
|
as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. Example:
|
|
<pre class="prettyprint lang-js">
|
|
var nodes = [
|
|
{id: 4, label: 'Node 4'},
|
|
{id: 5, label: 'Node 5'},
|
|
{id: 6, label: 'Node 6', cid:1},
|
|
{id: 7, label: 'Node 7', cid:1}
|
|
]
|
|
|
|
var options = {
|
|
joinCondition:function(nodeOptions) {
|
|
return nodeOptions.cid === 1;
|
|
}
|
|
}
|
|
|
|
network.clustering.cluster(options);
|
|
</pre></td></tr>
|
|
<tr><td>processProperties(<br> <code>Object nodeOptions</code><br>)</td> <td class="mid">Function</td> <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with the properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all contained edges. You can use this to update the
|
|
properties of the cluster based on which items it contains. The function should return the properties to create the cluster node. In the example below, we ensure preservation of mass and value when forming the cluster:
|
|
<pre class="prettyprint lang-js">
|
|
var options = {
|
|
processProperties: function (clusterOptions, childNodes, childEdges) {
|
|
var totalMass = 0;
|
|
var totalValue = 0;
|
|
for (var i = 0; i < childNodes.length; i++) {
|
|
totalMass += childNodes[i].mass;
|
|
totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue;
|
|
}
|
|
clusterOptions.mass = totalMass;
|
|
if (totalValue > 0) {
|
|
clusterOptions.value = totalValue;
|
|
}
|
|
return clusterOptions;
|
|
},
|
|
}
|
|
</pre></td></tr>
|
|
<tr><td>clusterNodeProperties</td> <td class="mid">Object</td> <td><i>Optional. </i> This is an object containing the options for the cluster node. All options described in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster node any way you want. This is also the style object that is provided in the processProperties function for fine tuning. If undefined, default node options will be used.</td></tr>
|
|
<tr><td>clusterEdgeProperties</td> <td class="mid">Object</td> <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. All options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can style the edges connecting to the cluster any way you want. If none are provided, the optoins from the edges that are replaced are used. If undefined, default edge options will be used.</td></tr>
|
|
</table>
|
|
<p>
|
|
|
|
</p>
|
|
|
|
<br><br>
|
|
<h3>Events</h3>
|
|
<p>The clustering module does not have any events.</p>
|
|
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../js/ie10-viewport-bug-workaround.js"></script>
|