diff --git a/HISTORY.md b/HISTORY.md
index 19e045ba..90f84b11 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -7,6 +7,7 @@ http://visjs.org
### Network
- Fixed flipping of hierarchical network on update when using RL and DU.
+- Added zoomExtentOnStabilize option to network.
### Graph2d
diff --git a/dist/vis.js b/dist/vis.js
index afc2ace1..516d408f 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 3.7.2-SNAPSHOT
- * @date 2014-12-23
+ * @date 2014-12-24
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -22484,10 +22484,10 @@ return /******/ (function(modules) { // webpackBootstrap
var Popup = __webpack_require__(56);
var MixinLoader = __webpack_require__(59);
var Activator = __webpack_require__(35);
- var locales = __webpack_require__(70);
+ var locales = __webpack_require__(60);
// Load custom shapes into CanvasRenderingContext2D
- __webpack_require__(71);
+ __webpack_require__(61);
/**
* @constructor Network
@@ -22661,6 +22661,7 @@ return /******/ (function(modules) { // webpackBootstrap
minVelocity: 0.1, // px/s
stabilize: true, // stabilize before displaying the network
stabilizationIterations: 1000, // maximum number of iteration to stabilize
+ zoomExtentOnStabilize: true,
locale: 'en',
locales: locales,
tooltip: {
@@ -24463,7 +24464,11 @@ return /******/ (function(modules) { // webpackBootstrap
this._physicsTick();
count++;
}
- this.zoomExtent(undefined,false,true);
+
+ if (this.constants.zoomExtentOnStabilize == true) {
+ this.zoomExtent(undefined, false, true);
+ }
+
if (this.constants.freezeForStabilization == true) {
this._restoreFrozenNodes();
}
@@ -28508,13 +28513,13 @@ return /******/ (function(modules) { // webpackBootstrap
/* 59 */
/***/ function(module, exports, __webpack_require__) {
- var PhysicsMixin = __webpack_require__(60);
- var ClusterMixin = __webpack_require__(64);
- var SectorsMixin = __webpack_require__(65);
- var SelectionMixin = __webpack_require__(66);
- var ManipulationMixin = __webpack_require__(67);
- var NavigationMixin = __webpack_require__(68);
- var HierarchicalLayoutMixin = __webpack_require__(69);
+ var PhysicsMixin = __webpack_require__(62);
+ var ClusterMixin = __webpack_require__(63);
+ var SectorsMixin = __webpack_require__(64);
+ var SelectionMixin = __webpack_require__(65);
+ var ManipulationMixin = __webpack_require__(66);
+ var NavigationMixin = __webpack_require__(67);
+ var HierarchicalLayoutMixin = __webpack_require__(68);
/**
* Load a mixin into the network object
@@ -28707,12 +28712,284 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
/* 60 */
+/***/ function(module, exports, __webpack_require__) {
+
+ // English
+ exports['en'] = {
+ edit: 'Edit',
+ del: 'Delete selected',
+ back: 'Back',
+ addNode: 'Add Node',
+ addEdge: 'Add Edge',
+ editNode: 'Edit Node',
+ editEdge: 'Edit Edge',
+ addDescription: 'Click in an empty space to place a new node.',
+ edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
+ editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
+ createEdgeError: 'Cannot link edges to a cluster.',
+ deleteClusterError: 'Clusters cannot be deleted.'
+ };
+ exports['en_EN'] = exports['en'];
+ exports['en_US'] = exports['en'];
+
+ // Dutch
+ exports['nl'] = {
+ edit: 'Wijzigen',
+ del: 'Selectie verwijderen',
+ back: 'Terug',
+ addNode: 'Node toevoegen',
+ addEdge: 'Link toevoegen',
+ editNode: 'Node wijzigen',
+ editEdge: 'Link wijzigen',
+ addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
+ edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
+ editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
+ createEdgeError: 'Kan geen link maken naar een cluster.',
+ deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
+ };
+ exports['nl_NL'] = exports['nl'];
+ exports['nl_BE'] = exports['nl'];
+
+
+/***/ },
+/* 61 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Canvas shapes used by Network
+ */
+ if (typeof CanvasRenderingContext2D !== 'undefined') {
+
+ /**
+ * Draw a circle shape
+ */
+ CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+ this.beginPath();
+ this.arc(x, y, r, 0, 2*Math.PI, false);
+ };
+
+ /**
+ * Draw a square shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r size, width and height of the square
+ */
+ CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+ this.beginPath();
+ this.rect(x - r, y - r, r * 2, r * 2);
+ };
+
+ /**
+ * Draw a triangle shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y - (h - ir));
+ this.lineTo(x + s2, y + ir);
+ this.lineTo(x - s2, y + ir);
+ this.lineTo(x, y - (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a triangle shape in downward orientation
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius
+ */
+ CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y + (h - ir));
+ this.lineTo(x + s2, y - ir);
+ this.lineTo(x - s2, y - ir);
+ this.lineTo(x, y + (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a star shape, a star with 5 points
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+ // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+ this.beginPath();
+
+ for (var n = 0; n < 10; n++) {
+ var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+ this.lineTo(
+ x + radius * Math.sin(n * 2 * Math.PI / 10),
+ y - radius * Math.cos(n * 2 * Math.PI / 10)
+ );
+ }
+
+ this.closePath();
+ };
+
+ /**
+ * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+ */
+ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+ var r2d = Math.PI/180;
+ if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+ if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+ this.beginPath();
+ this.moveTo(x+r,y);
+ this.lineTo(x+w-r,y);
+ this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+ this.lineTo(x+w,y+h-r);
+ this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+ this.lineTo(x+r,y+h);
+ this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+ this.lineTo(x,y+r);
+ this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+ };
+
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+ var kappa = .5522848,
+ ox = (w / 2) * kappa, // control point offset horizontal
+ oy = (h / 2) * kappa, // control point offset vertical
+ xe = x + w, // x-end
+ ye = y + h, // y-end
+ xm = x + w / 2, // x-middle
+ ym = y + h / 2; // y-middle
+
+ this.beginPath();
+ this.moveTo(x, ym);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
+
+
+
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+ var f = 1/3;
+ var wEllipse = w;
+ var hEllipse = h * f;
+
+ var kappa = .5522848,
+ ox = (wEllipse / 2) * kappa, // control point offset horizontal
+ oy = (hEllipse / 2) * kappa, // control point offset vertical
+ xe = x + wEllipse, // x-end
+ ye = y + hEllipse, // y-end
+ xm = x + wEllipse / 2, // x-middle
+ ym = y + hEllipse / 2, // y-middle
+ ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
+ yeb = y + h; // y-end, bottom ellipse
+
+ this.beginPath();
+ this.moveTo(xe, ym);
+
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+
+ this.lineTo(xe, ymb);
+
+ this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+ this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+
+ this.lineTo(x, ym);
+ };
+
+
+ /**
+ * Draw an arrow point (no line)
+ */
+ CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+ // tail
+ var xt = x - length * Math.cos(angle);
+ var yt = y - length * Math.sin(angle);
+
+ // inner tail
+ // TODO: allow to customize different shapes
+ var xi = x - length * 0.9 * Math.cos(angle);
+ var yi = y - length * 0.9 * Math.sin(angle);
+
+ // left
+ var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+ var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+
+ // right
+ var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+ var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+
+ this.beginPath();
+ this.moveTo(x, y);
+ this.lineTo(xl, yl);
+ this.lineTo(xi, yi);
+ this.lineTo(xr, yr);
+ this.closePath();
+ };
+
+ /**
+ * Sets up the dashedLine functionality for drawing
+ * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ */
+ CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+ if (!dashArray) dashArray=[10,5];
+ if (dashLength==0) dashLength = 0.001; // Hack for Safari
+ var dashCount = dashArray.length;
+ this.moveTo(x, y);
+ var dx = (x2-x), dy = (y2-y);
+ var slope = dy/dx;
+ var distRemaining = Math.sqrt( dx*dx + dy*dy );
+ var dashIndex=0, draw=true;
+ while (distRemaining>=0.1){
+ var dashLength = dashArray[dashIndex++%dashCount];
+ if (dashLength > distRemaining) dashLength = distRemaining;
+ var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+ if (dx<0) xStep = -xStep;
+ x += xStep;
+ y += slope*xStep;
+ this[draw ? 'lineTo' : 'moveTo'](x,y);
+ distRemaining -= dashLength;
+ draw = !draw;
+ }
+ };
+
+ // TODO: add diamond shape
+ }
+
+
+/***/ },
+/* 62 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var RepulsionMixin = __webpack_require__(61);
- var HierarchialRepulsionMixin = __webpack_require__(62);
- var BarnesHutMixin = __webpack_require__(63);
+ var RepulsionMixin = __webpack_require__(69);
+ var HierarchialRepulsionMixin = __webpack_require__(70);
+ var BarnesHutMixin = __webpack_require__(71);
/**
* Toggling barnes Hut calculation on and off.
@@ -29420,258 +29697,276 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 61 */
+/* 63 */
/***/ function(module, exports, __webpack_require__) {
/**
- * Calculate the forces the nodes apply on each other based on a repulsion field.
- * This field is linearly approximated.
+ * Creation of the ClusterMixin var.
*
- * @private
+ * This contains all the functions the Network object can use to employ clustering
*/
- exports._calculateNodeForces = function () {
- var dx, dy, angle, distance, fx, fy, combinedClusterSize,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
- // approximation constants
- var a_base = -2 / 3;
- var b = 4 / 3;
+ /**
+ * This is only called in the constructor of the network object
+ *
+ */
+ exports.startWithClustering = function() {
+ // cluster if the data set is big
+ this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.repulsion.nodeDistance;
- var minimumDistance = nodeDistance;
+ // updates the lables after clustering
+ this.updateLabels();
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
- combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+ // this is called here because if clusterin is disabled, the start and stabilize are called in
+ // the setData function.
+ if (this.stabilize) {
+ this._stabilize();
+ }
+ this.start();
+ };
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
+ /**
+ * This function clusters until the initialMaxNodes has been reached
+ *
+ * @param {Number} maxNumberOfNodes
+ * @param {Boolean} reposition
+ */
+ exports.clusterToFit = function(maxNumberOfNodes, reposition) {
+ var numberOfNodes = this.nodeIndices.length;
- minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
- var a = a_base / minimumDistance;
- if (distance < 2 * minimumDistance) {
- if (distance < 0.5 * minimumDistance) {
- repulsingForce = 1.0;
- }
- else {
- repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
- }
+ var maxLevels = 50;
+ var level = 0;
- // amplify the repulsion for clusters.
- repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
- repulsingForce = repulsingForce / distance;
+ // we first cluster the hubs, then we pull in the outliers, repeat
+ while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
+ if (level % 3 == 0) {
+ this.forceAggregateHubs(true);
+ this.normalizeClusterLevels();
+ }
+ else {
+ this.increaseClusterLevel(); // this also includes a cluster normalization
+ }
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
+ numberOfNodes = this.nodeIndices.length;
+ level += 1;
+ }
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
- }
- }
+ // after the clustering we reposition the nodes to reduce the initial chaos
+ if (level > 0 && reposition == true) {
+ this.repositionNodes();
}
+ this._updateCalculationNodes();
};
-
-/***/ },
-/* 62 */
-/***/ function(module, exports, __webpack_require__) {
-
/**
- * Calculate the forces the nodes apply on eachother based on a repulsion field.
- * This field is linearly approximated.
+ * This function can be called to open up a specific cluster. It is only called by
+ * It will unpack the cluster back one level.
*
- * @private
+ * @param node | Node object: cluster to open.
*/
- exports._calculateNodeForces = function () {
- var dx, dy, distance, fx, fy,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+ exports.openCluster = function(node) {
+ var isMovingBeforeClustering = this.moving;
+ if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
+ !(this._sector() == "default" && this.nodeIndices.length == 1)) {
+ // this loads a new sector, loads the nodes and edges and nodeIndices of it.
+ this._addSector(node);
+ var level = 0;
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
+ // we decluster until we reach a decent number of nodes
+ while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
+ this.decreaseClusterLevel();
+ level += 1;
+ }
- // nodes only affect nodes on their level
- if (node1.level == node2.level) {
+ }
+ else {
+ this._expandClusterNode(node,false,true);
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
+ // update the index list, dynamic edges and labels
+ this._updateNodeIndexList();
+ this._updateDynamicEdges();
+ this._updateCalculationNodes();
+ this.updateLabels();
+ }
+ // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+ if (this.moving != isMovingBeforeClustering) {
+ this.start();
+ }
+ };
- var steepness = 0.05;
- if (distance < nodeDistance) {
- repulsingForce = -Math.pow(steepness*distance,2) + Math.pow(steepness*nodeDistance,2);
- }
- else {
- repulsingForce = 0;
- }
- // normalize force with
- if (distance == 0) {
- distance = 0.01;
- }
- else {
- repulsingForce = repulsingForce / distance;
- }
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
- }
- }
+ /**
+ * This calls the updateClustes with default arguments
+ */
+ exports.updateClustersDefault = function() {
+ if (this.constants.clustering.enabled == true) {
+ this.updateClusters(0,false,false);
}
};
/**
- * this function calculates the effects of the springs in the case of unsmooth curves.
- *
- * @private
+ * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
+ * be clustered with their connected node. This can be repeated as many times as needed.
+ * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
*/
- exports._calculateHierarchicalSpringForces = function () {
- var edgeLength, edge, edgeId;
- var dx, dy, fx, fy, springForce, distance;
- var edges = this.edges;
+ exports.increaseClusterLevel = function() {
+ this.updateClusters(-1,false,true);
+ };
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
+ /**
+ * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
+ * be unpacked if they are a cluster. This can be repeated as many times as needed.
+ * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
+ */
+ exports.decreaseClusterLevel = function() {
+ this.updateClusters(1,false,true);
+ };
- for (var i = 0; i < nodeIndices.length; i++) {
- var node1 = nodes[nodeIndices[i]];
- node1.springFx = 0;
- node1.springFy = 0;
- }
+ /**
+ * This is the main clustering function. It clusters and declusters on zoom or forced
+ * This function clusters on zoom, it can be called with a predefined zoom direction
+ * If out, check if we can form clusters, if in, check if we can open clusters.
+ * This function is only called from _zoom()
+ *
+ * @param {Number} zoomDirection | -1 / 0 / +1 for zoomOut / determineByZoom / zoomIn
+ * @param {Boolean} recursive | enabled or disable recursive calling of the opening of clusters
+ * @param {Boolean} force | enabled or disable forcing
+ * @param {Boolean} doNotStart | if true do not call start
+ *
+ */
+ exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
+ var isMovingBeforeClustering = this.moving;
+ var amountOfNodes = this.nodeIndices.length;
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- edgeLength = edge.physics.springLength;
- // this implies that the edges between big clusters are longer
- edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+ // on zoom out collapse the sector if the scale is at the level the sector was made
+ if (this.previousScale > this.scale && zoomDirection == 0) {
+ this._collapseSector();
+ }
- dx = (edge.from.x - edge.to.x);
- dy = (edge.from.y - edge.to.y);
- distance = Math.sqrt(dx * dx + dy * dy);
+ // check if we zoom in or out
+ if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+ // forming clusters when forced pulls outliers in. When not forced, the edge length of the
+ // outer nodes determines if it is being clustered
+ this._formClusters(force);
+ }
+ else if (this.previousScale < this.scale || zoomDirection == 1) { // zoom in
+ if (force == true) {
+ // _openClusters checks for each node if the formationScale of the cluster is smaller than
+ // the current scale and if so, declusters. When forced, all clusters are reduced by one step
+ this._openClusters(recursive,force);
+ }
+ else {
+ // if a cluster takes up a set percentage of the active window
+ this._openClustersBySize();
+ }
+ }
+ this._updateNodeIndexList();
- if (distance == 0) {
- distance = 0.01;
- }
+ // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
+ if (this.nodeIndices.length == amountOfNodes && (this.previousScale > this.scale || zoomDirection == -1)) {
+ this._aggregateHubs(force);
+ this._updateNodeIndexList();
+ }
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+ // we now reduce chains.
+ if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
+ this.handleChains();
+ this._updateNodeIndexList();
+ }
- fx = dx * springForce;
- fy = dy * springForce;
+ this.previousScale = this.scale;
+ // rest of the update the index list, dynamic edges and labels
+ this._updateDynamicEdges();
+ this.updateLabels();
+ // if a cluster was formed, we increase the clusterSession
+ if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
+ this.clusterSession += 1;
+ // if clusters have been made, we normalize the cluster level
+ this.normalizeClusterLevels();
+ }
- if (edge.to.level != edge.from.level) {
- edge.to.springFx -= fx;
- edge.to.springFy -= fy;
- edge.from.springFx += fx;
- edge.from.springFy += fy;
- }
- else {
- var factor = 0.5;
- edge.to.fx -= factor*fx;
- edge.to.fy -= factor*fy;
- edge.from.fx += factor*fx;
- edge.from.fy += factor*fy;
- }
- }
- }
+ if (doNotStart == false || doNotStart === undefined) {
+ // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+ if (this.moving != isMovingBeforeClustering) {
+ this.start();
}
}
- // normalize spring forces
- var springForce = 1;
- var springFx, springFy;
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- springFx = Math.min(springForce,Math.max(-springForce,node.springFx));
- springFy = Math.min(springForce,Math.max(-springForce,node.springFy));
-
- node.fx += springFx;
- node.fy += springFy;
- }
+ this._updateCalculationNodes();
+ };
- // retain energy balance
- var totalFx = 0;
- var totalFy = 0;
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- totalFx += node.fx;
- totalFy += node.fy;
- }
- var correctionFx = totalFx / nodeIndices.length;
- var correctionFy = totalFy / nodeIndices.length;
+ /**
+ * This function handles the chains. It is called on every updateClusters().
+ */
+ exports.handleChains = function() {
+ // after clustering we check how many chains there are
+ var chainPercentage = this._getChainFraction();
+ if (chainPercentage > this.constants.clustering.chainThreshold) {
+ this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- node.fx -= correctionFx;
- node.fy -= correctionFy;
}
+ };
+ /**
+ * this functions starts clustering by hubs
+ * The minimum hub threshold is set globally
+ *
+ * @private
+ */
+ exports._aggregateHubs = function(force) {
+ this._getHubSize();
+ this._formClustersByHub(force,false);
};
-/***/ },
-/* 63 */
-/***/ function(module, exports, __webpack_require__) {
/**
- * This function calculates the forces the nodes apply on eachother based on a gravitational model.
- * The Barnes Hut method is used to speed up this N-body simulation.
+ * This function is fired by keypress. It forces hubs to form.
*
- * @private
*/
- exports._calculateNodeForces = function() {
- if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
- var node;
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
- var nodeCount = nodeIndices.length;
+ exports.forceAggregateHubs = function(doNotStart) {
+ var isMovingBeforeClustering = this.moving;
+ var amountOfNodes = this.nodeIndices.length;
- this._formBarnesHutTree(nodes,nodeIndices);
+ this._aggregateHubs(true);
- var barnesHutTree = this.barnesHutTree;
+ // update the index list, dynamic edges and labels
+ this._updateNodeIndexList();
+ this._updateDynamicEdges();
+ this.updateLabels();
- // place the nodes one by one recursively
- for (var i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- // starting with root is irrelevant, it never passes the BarnesHut condition
- this._getForceContribution(barnesHutTree.root.children.NW,node);
- this._getForceContribution(barnesHutTree.root.children.NE,node);
- this._getForceContribution(barnesHutTree.root.children.SW,node);
- this._getForceContribution(barnesHutTree.root.children.SE,node);
+ // if a cluster was formed, we increase the clusterSession
+ if (this.nodeIndices.length != amountOfNodes) {
+ this.clusterSession += 1;
+ }
+
+ if (doNotStart == false || doNotStart === undefined) {
+ // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
+ if (this.moving != isMovingBeforeClustering) {
+ this.start();
+ }
+ }
+ };
+
+ /**
+ * If a cluster takes up more than a set percentage of the screen, open the cluster
+ *
+ * @private
+ */
+ exports._openClustersBySize = function() {
+ for (var nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ var node = this.nodes[nodeId];
+ if (node.inView() == true) {
+ if ((node.width*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
+ (node.height*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
+ this.openCluster(node);
+ }
}
}
}
@@ -29679,58 +29974,59 @@ return /******/ (function(modules) { // webpackBootstrap
/**
- * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
- * If a region contains a single node, we check if it is not itself, then we apply the force.
+ * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
+ * has to be opened based on the current zoom level.
*
- * @param parentBranch
- * @param node
* @private
*/
- exports._getForceContribution = function(parentBranch,node) {
- // we get no force contribution from an empty region
- if (parentBranch.childrenCount > 0) {
- var dx,dy,distance;
-
- // get the distance from the center of mass to the node.
- dx = parentBranch.centerOfMass.x - node.x;
- dy = parentBranch.centerOfMass.y - node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
+ exports._openClusters = function(recursive,force) {
+ for (var i = 0; i < this.nodeIndices.length; i++) {
+ var node = this.nodes[this.nodeIndices[i]];
+ this._expandClusterNode(node,recursive,force);
+ this._updateCalculationNodes();
+ }
+ };
- // BarnesHut condition
- // original condition : s/d < theta = passed === d/s > 1/theta = passed
- // calcSize = 1/s --> d * 1/s > 1/theta = passed
- if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.1*Math.random();
- dx = distance;
- }
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
+ /**
+ * This function checks if a node has to be opened. This is done by checking the zoom level.
+ * If the node contains child nodes, this function is recursively called on the child nodes as well.
+ * This recursive behaviour is optional and can be set by the recursive argument.
+ *
+ * @param {Node} parentNode | to check for cluster and expand
+ * @param {Boolean} recursive | enabled or disable recursive calling
+ * @param {Boolean} force | enabled or disable forcing
+ * @param {Boolean} [openAll] | This will recursively force all nodes in the parent to be released
+ * @private
+ */
+ exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
+ // first check if node is a cluster
+ if (parentNode.clusterSize > 1) {
+ // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
+ if (parentNode.clusterSize < this.constants.clustering.sectorThreshold) {
+ openAll = true;
}
- else {
- // Did not pass the condition, go into children if available
- if (parentBranch.childrenCount == 4) {
- this._getForceContribution(parentBranch.children.NW,node);
- this._getForceContribution(parentBranch.children.NE,node);
- this._getForceContribution(parentBranch.children.SW,node);
- this._getForceContribution(parentBranch.children.SE,node);
- }
- else { // parentBranch must have only one node, if it was empty we wouldnt be here
- if (parentBranch.children.data.id != node.id) { // if it is not self
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.5*Math.random();
- dx = distance;
+ recursive = openAll ? true : recursive;
+
+ // if the last child has been added on a smaller scale than current scale decluster
+ if (parentNode.formationScale < this.scale || force == true) {
+ // we will check if any of the contained child nodes should be removed from the cluster
+ for (var containedNodeId in parentNode.containedNodes) {
+ if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
+ var childNode = parentNode.containedNodes[containedNodeId];
+
+ // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
+ // the largest cluster is the one that comes from outside
+ if (force == true) {
+ if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
+ || openAll) {
+ this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
+ }
+ }
+ else {
+ if (this._nodeInActiveArea(parentNode)) {
+ this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
+ }
}
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
}
}
}
@@ -29738,1613 +30034,966 @@ return /******/ (function(modules) { // webpackBootstrap
};
/**
- * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+ * ONLY CALLED FROM _expandClusterNode
*
- * @param nodes
- * @param nodeIndices
+ * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
+ * the child node from the parent contained_node object and put it back into the global nodes object.
+ * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
+ *
+ * @param {Node} parentNode | the parent node
+ * @param {String} containedNodeId | child_node id as it is contained in the containedNodes object of the parent node
+ * @param {Boolean} recursive | This will also check if the child needs to be expanded.
+ * With force and recursive both true, the entire cluster is unpacked
+ * @param {Boolean} force | This will disregard the zoom level and will expel this child from the parent
+ * @param {Boolean} openAll | This will recursively force all nodes in the parent to be released
* @private
*/
- exports._formBarnesHutTree = function(nodes,nodeIndices) {
- var node;
- var nodeCount = nodeIndices.length;
+ exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
+ var childNode = parentNode.containedNodes[containedNodeId];
- var minX = Number.MAX_VALUE,
- minY = Number.MAX_VALUE,
- maxX =-Number.MAX_VALUE,
- maxY =-Number.MAX_VALUE;
+ // if child node has been added on smaller scale than current, kick out
+ if (childNode.formationScale < this.scale || force == true) {
+ // unselect all selected items
+ this._unselectAll();
- // get the range of the nodes
- for (var i = 0; i < nodeCount; i++) {
- var x = nodes[nodeIndices[i]].x;
- var y = nodes[nodeIndices[i]].y;
- if (nodes[nodeIndices[i]].options.mass > 0) {
- if (x < minX) { minX = x; }
- if (x > maxX) { maxX = x; }
- if (y < minY) { minY = y; }
- if (y > maxY) { maxY = y; }
- }
- }
- // make the range a square
- var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
- if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
- else {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
+ // put the child node back in the global nodes object
+ this.nodes[containedNodeId] = childNode;
+ // release the contained edges from this childNode back into the global edges
+ this._releaseContainedEdges(parentNode,childNode);
- var minimumTreeSize = 1e-5;
- var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
- var halfRootSize = 0.5 * rootSize;
- var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+ // reconnect rerouted edges to the childNode
+ this._connectEdgeBackToChild(parentNode,childNode);
- // construct the barnesHutTree
- var barnesHutTree = {
- root:{
- centerOfMass: {x:0, y:0},
- mass:0,
- range: {
- minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
- minY: centerY-halfRootSize,maxY:centerY+halfRootSize
- },
- size: rootSize,
- calcSize: 1 / rootSize,
- children: { data:null},
- maxWidth: 0,
- level: 0,
- childrenCount: 4
- }
- };
- this._splitBranch(barnesHutTree.root);
+ // validate all edges in dynamicEdges
+ this._validateEdges(parentNode);
- // place the nodes one by one recursively
- for (i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- this._placeInTree(barnesHutTree.root,node);
- }
- }
+ // undo the changes from the clustering operation on the parent node
+ parentNode.options.mass -= childNode.options.mass;
+ parentNode.clusterSize -= childNode.clusterSize;
+ parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
+ parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
- // make global
- this.barnesHutTree = barnesHutTree
- };
+ // place the child node near the parent, not at the exact same location to avoid chaos in the system
+ childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
+ childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+ // remove node from the list
+ delete parentNode.containedNodes[containedNodeId];
- /**
- * this updates the mass of a branch. this is increased by adding a node.
- *
- * @param parentBranch
- * @param node
- * @private
- */
- exports._updateBranchMass = function(parentBranch, node) {
- var totalMass = parentBranch.mass + node.options.mass;
- var totalMassInv = 1/totalMass;
+ // check if there are other childs with this clusterSession in the parent.
+ var othersPresent = false;
+ for (var childNodeId in parentNode.containedNodes) {
+ if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
+ if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
+ othersPresent = true;
+ break;
+ }
+ }
+ }
+ // if there are no others, remove the cluster session from the list
+ if (othersPresent == false) {
+ parentNode.clusterSessions.pop();
+ }
- parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
- parentBranch.centerOfMass.x *= totalMassInv;
+ this._repositionBezierNodes(childNode);
+ // this._repositionBezierNodes(parentNode);
- parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
- parentBranch.centerOfMass.y *= totalMassInv;
+ // remove the clusterSession from the child node
+ childNode.clusterSession = 0;
- parentBranch.mass = totalMass;
- var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
- parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+ // recalculate the size of the node on the next time the node is rendered
+ parentNode.clearSizeCache();
+
+ // restart the simulation to reorganise all nodes
+ this.moving = true;
+ }
+ // check if a further expansion step is possible if recursivity is enabled
+ if (recursive == true) {
+ this._expandClusterNode(childNode,recursive,force,openAll);
+ }
};
/**
- * determine in which branch the node will be placed.
+ * position the bezier nodes at the center of the edges
*
- * @param parentBranch
* @param node
- * @param skipMassUpdate
* @private
*/
- exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
- if (skipMassUpdate != true || skipMassUpdate === undefined) {
- // update the mass of the branch.
- this._updateBranchMass(parentBranch,node);
- }
-
- if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
- if (parentBranch.children.NW.range.maxY > node.y) { // in NW
- this._placeInRegion(parentBranch,node,"NW");
- }
- else { // in SW
- this._placeInRegion(parentBranch,node,"SW");
- }
- }
- else { // in NE or SE
- if (parentBranch.children.NW.range.maxY > node.y) { // in NE
- this._placeInRegion(parentBranch,node,"NE");
- }
- else { // in SE
- this._placeInRegion(parentBranch,node,"SE");
- }
+ exports._repositionBezierNodes = function(node) {
+ for (var i = 0; i < node.dynamicEdges.length; i++) {
+ node.dynamicEdges[i].positionBezierNode();
}
};
/**
- * actually place the node in a region (or branch)
+ * This function checks if any nodes at the end of their trees have edges below a threshold length
+ * This function is called only from updateClusters()
+ * forceLevelCollapse ignores the length of the edge and collapses one level
+ * This means that a node with only one edge will be clustered with its connected node
*
- * @param parentBranch
- * @param node
- * @param region
* @private
+ * @param {Boolean} force
*/
- exports._placeInRegion = function(parentBranch,node,region) {
- switch (parentBranch.children[region].childrenCount) {
- case 0: // place node here
- parentBranch.children[region].children.data = node;
- parentBranch.children[region].childrenCount = 1;
- this._updateBranchMass(parentBranch.children[region],node);
- break;
- case 1: // convert into children
- // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
- // we move one node a pixel and we do not put it in the tree.
- if (parentBranch.children[region].children.data.x == node.x &&
- parentBranch.children[region].children.data.y == node.y) {
- node.x += Math.random();
- node.y += Math.random();
- }
- else {
- this._splitBranch(parentBranch.children[region]);
- this._placeInTree(parentBranch.children[region],node);
- }
- break;
- case 4: // place in branch
- this._placeInTree(parentBranch.children[region],node);
- break;
+ exports._formClusters = function(force) {
+ if (force == false) {
+ this._formClustersByZoom();
+ }
+ else {
+ this._forceClustersByZoom();
}
};
/**
- * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
- * after the split is complete.
+ * This function handles the clustering by zooming out, this is based on a minimum edge distance
*
- * @param parentBranch
* @private
*/
- exports._splitBranch = function(parentBranch) {
- // if the branch is shaded with a node, replace the node in the new subset.
- var containedNode = null;
- if (parentBranch.childrenCount == 1) {
- containedNode = parentBranch.children.data;
- parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
- }
- parentBranch.childrenCount = 4;
- parentBranch.children.data = null;
- this._insertRegion(parentBranch,"NW");
- this._insertRegion(parentBranch,"NE");
- this._insertRegion(parentBranch,"SW");
- this._insertRegion(parentBranch,"SE");
+ exports._formClustersByZoom = function() {
+ var dx,dy,length,
+ minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
- if (containedNode != null) {
- this._placeInTree(parentBranch,containedNode);
+ // check if any edges are shorter than minLength and start the clustering
+ // the clustering favours the node with the larger mass
+ for (var edgeId in this.edges) {
+ if (this.edges.hasOwnProperty(edgeId)) {
+ var edge = this.edges[edgeId];
+ if (edge.connected) {
+ if (edge.toId != edge.fromId) {
+ dx = (edge.to.x - edge.from.x);
+ dy = (edge.to.y - edge.from.y);
+ length = Math.sqrt(dx * dx + dy * dy);
+
+
+ if (length < minLength) {
+ // first check which node is larger
+ var parentNode = edge.from;
+ var childNode = edge.to;
+ if (edge.to.options.mass > edge.from.options.mass) {
+ parentNode = edge.to;
+ childNode = edge.from;
+ }
+
+ if (childNode.dynamicEdgesLength == 1) {
+ this._addToCluster(parentNode,childNode,false);
+ }
+ else if (parentNode.dynamicEdgesLength == 1) {
+ this._addToCluster(childNode,parentNode,false);
+ }
+ }
+ }
+ }
+ }
}
};
-
/**
- * This function subdivides the region into four new segments.
- * Specifically, this inserts a single new segment.
- * It fills the children section of the parentBranch
+ * This function forces the network to cluster all nodes with only one connecting edge to their
+ * connected node.
*
- * @param parentBranch
- * @param region
- * @param parentRange
* @private
*/
- exports._insertRegion = function(parentBranch, region) {
- var minX,maxX,minY,maxY;
- var childSize = 0.5 * parentBranch.size;
- switch (region) {
- case "NW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "NE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "SW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- case "SE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- }
+ exports._forceClustersByZoom = function() {
+ for (var nodeId in this.nodes) {
+ // another node could have absorbed this child.
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ var childNode = this.nodes[nodeId];
+ // the edges can be swallowed by another decrease
+ if (childNode.dynamicEdgesLength == 1 && childNode.dynamicEdges.length != 0) {
+ var edge = childNode.dynamicEdges[0];
+ var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
- parentBranch.children[region] = {
- centerOfMass:{x:0,y:0},
- mass:0,
- range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
- size: 0.5 * parentBranch.size,
- calcSize: 2 * parentBranch.calcSize,
- children: {data:null},
- maxWidth: 0,
- level: parentBranch.level+1,
- childrenCount: 0
- };
+ // group to the largest node
+ if (childNode.id != parentNode.id) {
+ if (parentNode.options.mass > childNode.options.mass) {
+ this._addToCluster(parentNode,childNode,true);
+ }
+ else {
+ this._addToCluster(childNode,parentNode,true);
+ }
+ }
+ }
+ }
+ }
};
/**
- * This function is for debugging purposed, it draws the tree.
+ * To keep the nodes of roughly equal size we normalize the cluster levels.
+ * This function clusters a node to its smallest connected neighbour.
*
- * @param ctx
- * @param color
+ * @param node
* @private
*/
- exports._drawTree = function(ctx,color) {
- if (this.barnesHutTree !== undefined) {
+ exports._clusterToSmallestNeighbour = function(node) {
+ var smallestNeighbour = -1;
+ var smallestNeighbourNode = null;
+ for (var i = 0; i < node.dynamicEdges.length; i++) {
+ if (node.dynamicEdges[i] !== undefined) {
+ var neighbour = null;
+ if (node.dynamicEdges[i].fromId != node.id) {
+ neighbour = node.dynamicEdges[i].from;
+ }
+ else if (node.dynamicEdges[i].toId != node.id) {
+ neighbour = node.dynamicEdges[i].to;
+ }
- ctx.lineWidth = 1;
- this._drawBranch(this.barnesHutTree.root,ctx,color);
+ if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
+ smallestNeighbour = neighbour.clusterSessions.length;
+ smallestNeighbourNode = neighbour;
+ }
+ }
+ }
+
+ if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
+ this._addToCluster(neighbour, node, true);
}
};
/**
- * This function is for debugging purposes. It draws the branches recursively.
+ * This function forms clusters from hubs, it loops over all nodes
*
- * @param branch
- * @param ctx
- * @param color
+ * @param {Boolean} force | Disregard zoom level
+ * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
* @private
*/
- exports._drawBranch = function(branch,ctx,color) {
- if (color === undefined) {
- color = "#FF0000";
- }
-
- if (branch.childrenCount == 4) {
- this._drawBranch(branch.children.NW,ctx);
- this._drawBranch(branch.children.NE,ctx);
- this._drawBranch(branch.children.SE,ctx);
- this._drawBranch(branch.children.SW,ctx);
+ exports._formClustersByHub = function(force, onlyEqual) {
+ // we loop over all nodes in the list
+ for (var nodeId in this.nodes) {
+ // we check if it is still available since it can be used by the clustering in this loop
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
+ }
}
- ctx.strokeStyle = color;
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.minY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.minY);
- ctx.stroke();
-
- /*
- if (branch.mass > 0) {
- ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
- ctx.stroke();
- }
- */
};
-
-/***/ },
-/* 64 */
-/***/ function(module, exports, __webpack_require__) {
-
/**
- * Creation of the ClusterMixin var.
+ * This function forms a cluster from a specific preselected hub node
*
- * This contains all the functions the Network object can use to employ clustering
+ * @param {Node} hubNode | the node we will cluster as a hub
+ * @param {Boolean} force | Disregard zoom level
+ * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
+ * @param {Number} [absorptionSizeOffset] |
+ * @private
*/
+ exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
+ if (absorptionSizeOffset === undefined) {
+ absorptionSizeOffset = 0;
+ }
+ // we decide if the node is a hub
+ if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
+ (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
+ // initialize variables
+ var dx,dy,length;
+ var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
+ var allowCluster = false;
- /**
- * This is only called in the constructor of the network object
- *
- */
- exports.startWithClustering = function() {
- // cluster if the data set is big
- this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
+ // we create a list of edges because the dynamicEdges change over the course of this loop
+ var edgesIdarray = [];
+ var amountOfInitialEdges = hubNode.dynamicEdges.length;
+ for (var j = 0; j < amountOfInitialEdges; j++) {
+ edgesIdarray.push(hubNode.dynamicEdges[j].id);
+ }
- // updates the lables after clustering
- this.updateLabels();
+ // if the hub clustering is not forces, we check if one of the edges connected
+ // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
+ if (force == false) {
+ allowCluster = false;
+ for (j = 0; j < amountOfInitialEdges; j++) {
+ var edge = this.edges[edgesIdarray[j]];
+ if (edge !== undefined) {
+ if (edge.connected) {
+ if (edge.toId != edge.fromId) {
+ dx = (edge.to.x - edge.from.x);
+ dy = (edge.to.y - edge.from.y);
+ length = Math.sqrt(dx * dx + dy * dy);
- // this is called here because if clusterin is disabled, the start and stabilize are called in
- // the setData function.
- if (this.stabilize) {
- this._stabilize();
- }
- this.start();
+ if (length < minLength) {
+ allowCluster = true;
+ break;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // start the clustering if allowed
+ if ((!force && allowCluster) || force) {
+ // we loop over all edges INITIALLY connected to this hub
+ for (j = 0; j < amountOfInitialEdges; j++) {
+ edge = this.edges[edgesIdarray[j]];
+ // the edge can be clustered by this function in a previous loop
+ if (edge !== undefined) {
+ var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
+ // we do not want hubs to merge with other hubs nor do we want to cluster itself.
+ if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
+ (childNode.id != hubNode.id)) {
+ this._addToCluster(hubNode,childNode,force);
+ }
+ }
+ }
+ }
+ }
};
+
+
/**
- * This function clusters until the initialMaxNodes has been reached
+ * This function adds the child node to the parent node, creating a cluster if it is not already.
*
- * @param {Number} maxNumberOfNodes
- * @param {Boolean} reposition
+ * @param {Node} parentNode | this is the node that will house the child node
+ * @param {Node} childNode | this node will be deleted from the global this.nodes and stored in the parent node
+ * @param {Boolean} force | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
+ * @private
*/
- exports.clusterToFit = function(maxNumberOfNodes, reposition) {
- var numberOfNodes = this.nodeIndices.length;
-
- var maxLevels = 50;
- var level = 0;
+ exports._addToCluster = function(parentNode, childNode, force) {
+ // join child node in the parent node
+ parentNode.containedNodes[childNode.id] = childNode;
- // we first cluster the hubs, then we pull in the outliers, repeat
- while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
- if (level % 3 == 0) {
- this.forceAggregateHubs(true);
- this.normalizeClusterLevels();
+ // manage all the edges connected to the child and parent nodes
+ for (var i = 0; i < childNode.dynamicEdges.length; i++) {
+ var edge = childNode.dynamicEdges[i];
+ if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
+ this._addToContainedEdges(parentNode,childNode,edge);
}
else {
- this.increaseClusterLevel(); // this also includes a cluster normalization
+ this._connectEdgeToCluster(parentNode,childNode,edge);
}
-
- numberOfNodes = this.nodeIndices.length;
- level += 1;
}
+ // a contained node has no dynamic edges.
+ childNode.dynamicEdges = [];
- // after the clustering we reposition the nodes to reduce the initial chaos
- if (level > 0 && reposition == true) {
- this.repositionNodes();
- }
- this._updateCalculationNodes();
- };
+ // remove circular edges from clusters
+ this._containCircularEdgesFromNode(parentNode,childNode);
- /**
- * This function can be called to open up a specific cluster. It is only called by
- * It will unpack the cluster back one level.
- *
- * @param node | Node object: cluster to open.
- */
- exports.openCluster = function(node) {
- var isMovingBeforeClustering = this.moving;
- if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
- !(this._sector() == "default" && this.nodeIndices.length == 1)) {
- // this loads a new sector, loads the nodes and edges and nodeIndices of it.
- this._addSector(node);
- var level = 0;
- // we decluster until we reach a decent number of nodes
- while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
- this.decreaseClusterLevel();
- level += 1;
- }
+ // remove the childNode from the global nodes object
+ delete this.nodes[childNode.id];
- }
- else {
- this._expandClusterNode(node,false,true);
+ // update the properties of the child and parent
+ var massBefore = parentNode.options.mass;
+ childNode.clusterSession = this.clusterSession;
+ parentNode.options.mass += childNode.options.mass;
+ parentNode.clusterSize += childNode.clusterSize;
+ parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
- // update the index list, dynamic edges and labels
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- this._updateCalculationNodes();
- this.updateLabels();
+ // keep track of the clustersessions so we can open the cluster up as it has been formed.
+ if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
+ parentNode.clusterSessions.push(this.clusterSession);
}
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
+ // forced clusters only open from screen size and double tap
+ if (force == true) {
+ // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
+ parentNode.formationScale = 0;
}
- };
-
-
- /**
- * This calls the updateClustes with default arguments
- */
- exports.updateClustersDefault = function() {
- if (this.constants.clustering.enabled == true) {
- this.updateClusters(0,false,false);
+ else {
+ parentNode.formationScale = this.scale; // The latest child has been added on this scale
}
- };
+ // recalculate the size of the node on the next time the node is rendered
+ parentNode.clearSizeCache();
- /**
- * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
- * be clustered with their connected node. This can be repeated as many times as needed.
- * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
- */
- exports.increaseClusterLevel = function() {
- this.updateClusters(-1,false,true);
- };
+ // set the pop-out scale for the childnode
+ parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
+ // nullify the movement velocity of the child, this is to avoid hectic behaviour
+ childNode.clearVelocity();
- /**
- * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
- * be unpacked if they are a cluster. This can be repeated as many times as needed.
- * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
- */
- exports.decreaseClusterLevel = function() {
- this.updateClusters(1,false,true);
+ // the mass has altered, preservation of energy dictates the velocity to be updated
+ parentNode.updateVelocity(massBefore);
+
+ // restart the simulation to reorganise all nodes
+ this.moving = true;
};
/**
- * This is the main clustering function. It clusters and declusters on zoom or forced
- * This function clusters on zoom, it can be called with a predefined zoom direction
- * If out, check if we can form clusters, if in, check if we can open clusters.
- * This function is only called from _zoom()
- *
- * @param {Number} zoomDirection | -1 / 0 / +1 for zoomOut / determineByZoom / zoomIn
- * @param {Boolean} recursive | enabled or disable recursive calling of the opening of clusters
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} doNotStart | if true do not call start
- *
+ * This function will apply the changes made to the remainingEdges during the formation of the clusters.
+ * This is a seperate function to allow for level-wise collapsing of the node barnesHutTree.
+ * It has to be called if a level is collapsed. It is called by _formClusters().
+ * @private
*/
- exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- // on zoom out collapse the sector if the scale is at the level the sector was made
- if (this.previousScale > this.scale && zoomDirection == 0) {
- this._collapseSector();
- }
+ exports._updateDynamicEdges = function() {
+ for (var i = 0; i < this.nodeIndices.length; i++) {
+ var node = this.nodes[this.nodeIndices[i]];
+ node.dynamicEdgesLength = node.dynamicEdges.length;
- // check if we zoom in or out
- if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
- // forming clusters when forced pulls outliers in. When not forced, the edge length of the
- // outer nodes determines if it is being clustered
- this._formClusters(force);
- }
- else if (this.previousScale < this.scale || zoomDirection == 1) { // zoom in
- if (force == true) {
- // _openClusters checks for each node if the formationScale of the cluster is smaller than
- // the current scale and if so, declusters. When forced, all clusters are reduced by one step
- this._openClusters(recursive,force);
- }
- else {
- // if a cluster takes up a set percentage of the active window
- this._openClustersBySize();
+ // this corrects for multiple edges pointing at the same other node
+ var correction = 0;
+ if (node.dynamicEdgesLength > 1) {
+ for (var j = 0; j < node.dynamicEdgesLength - 1; j++) {
+ var edgeToId = node.dynamicEdges[j].toId;
+ var edgeFromId = node.dynamicEdges[j].fromId;
+ for (var k = j+1; k < node.dynamicEdgesLength; k++) {
+ if ((node.dynamicEdges[k].toId == edgeToId && node.dynamicEdges[k].fromId == edgeFromId) ||
+ (node.dynamicEdges[k].fromId == edgeToId && node.dynamicEdges[k].toId == edgeFromId)) {
+ correction += 1;
+ }
+ }
+ }
}
+ node.dynamicEdgesLength -= correction;
}
- this._updateNodeIndexList();
+ };
- // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
- if (this.nodeIndices.length == amountOfNodes && (this.previousScale > this.scale || zoomDirection == -1)) {
- this._aggregateHubs(force);
- this._updateNodeIndexList();
- }
- // we now reduce chains.
- if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
- this.handleChains();
- this._updateNodeIndexList();
+ /**
+ * This adds an edge from the childNode to the contained edges of the parent node
+ *
+ * @param parentNode | Node object
+ * @param childNode | Node object
+ * @param edge | Edge object
+ * @private
+ */
+ exports._addToContainedEdges = function(parentNode, childNode, edge) {
+ // create an array object if it does not yet exist for this childNode
+ if (!(parentNode.containedEdges.hasOwnProperty(childNode.id))) {
+ parentNode.containedEdges[childNode.id] = []
}
+ // add this edge to the list
+ parentNode.containedEdges[childNode.id].push(edge);
- this.previousScale = this.scale;
-
- // rest of the update the index list, dynamic edges and labels
- this._updateDynamicEdges();
- this.updateLabels();
-
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
- this.clusterSession += 1;
- // if clusters have been made, we normalize the cluster level
- this.normalizeClusterLevels();
- }
+ // remove the edge from the global edges object
+ delete this.edges[edge.id];
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
+ // remove the edge from the parent object
+ for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+ if (parentNode.dynamicEdges[i].id == edge.id) {
+ parentNode.dynamicEdges.splice(i,1);
+ break;
}
}
-
- this._updateCalculationNodes();
};
/**
- * This function handles the chains. It is called on every updateClusters().
+ * This function connects an edge that was connected to a child node to the parent node.
+ * It keeps track of which nodes it has been connected to with the originalId array.
+ *
+ * @param {Node} parentNode | Node object
+ * @param {Node} childNode | Node object
+ * @param {Edge} edge | Edge object
+ * @private
*/
- exports.handleChains = function() {
- // after clustering we check how many chains there are
- var chainPercentage = this._getChainFraction();
- if (chainPercentage > this.constants.clustering.chainThreshold) {
- this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
+ exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
+ // handle circular edges
+ if (edge.toId == edge.fromId) {
+ this._addToContainedEdges(parentNode, childNode, edge);
+ }
+ else {
+ if (edge.toId == childNode.id) { // edge connected to other node on the "to" side
+ edge.originalToId.push(childNode.id);
+ edge.to = parentNode;
+ edge.toId = parentNode.id;
+ }
+ else { // edge connected to other node with the "from" side
+
+ edge.originalFromId.push(childNode.id);
+ edge.from = parentNode;
+ edge.fromId = parentNode.id;
+ }
+ this._addToReroutedEdges(parentNode,childNode,edge);
}
};
+
/**
- * this functions starts clustering by hubs
- * The minimum hub threshold is set globally
+ * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
+ * these edges inside of the cluster.
*
+ * @param parentNode
+ * @param childNode
* @private
*/
- exports._aggregateHubs = function(force) {
- this._getHubSize();
- this._formClustersByHub(force,false);
+ exports._containCircularEdgesFromNode = function(parentNode, childNode) {
+ // manage all the edges connected to the child and parent nodes
+ for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+ var edge = parentNode.dynamicEdges[i];
+ // handle circular edges
+ if (edge.toId == edge.fromId) {
+ this._addToContainedEdges(parentNode, childNode, edge);
+ }
+ }
};
/**
- * This function is fired by keypress. It forces hubs to form.
+ * This adds an edge from the childNode to the rerouted edges of the parent node
*
+ * @param parentNode | Node object
+ * @param childNode | Node object
+ * @param edge | Edge object
+ * @private
*/
- exports.forceAggregateHubs = function(doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- this._aggregateHubs(true);
+ exports._addToReroutedEdges = function(parentNode, childNode, edge) {
+ // create an array object if it does not yet exist for this childNode
+ // we store the edge in the rerouted edges so we can restore it when the cluster pops open
+ if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
+ parentNode.reroutedEdges[childNode.id] = [];
+ }
+ parentNode.reroutedEdges[childNode.id].push(edge);
- // update the index list, dynamic edges and labels
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- this.updateLabels();
+ // this edge becomes part of the dynamicEdges of the cluster node
+ parentNode.dynamicEdges.push(edge);
+ };
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- }
- };
/**
- * If a cluster takes up more than a set percentage of the screen, open the cluster
+ * This function connects an edge that was connected to a cluster node back to the child node.
*
+ * @param parentNode | Node object
+ * @param childNode | Node object
* @private
*/
- exports._openClustersBySize = function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.inView() == true) {
- if ((node.width*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
- (node.height*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
- this.openCluster(node);
+ exports._connectEdgeBackToChild = function(parentNode, childNode) {
+ if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
+ for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
+ var edge = parentNode.reroutedEdges[childNode.id][i];
+ if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
+ edge.originalFromId.pop();
+ edge.fromId = childNode.id;
+ edge.from = childNode;
+ }
+ else {
+ edge.originalToId.pop();
+ edge.toId = childNode.id;
+ edge.to = childNode;
+ }
+
+ // append this edge to the list of edges connecting to the childnode
+ childNode.dynamicEdges.push(edge);
+
+ // remove the edge from the parent object
+ for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
+ if (parentNode.dynamicEdges[j].id == edge.id) {
+ parentNode.dynamicEdges.splice(j,1);
+ break;
}
}
}
+ // remove the entry from the rerouted edges
+ delete parentNode.reroutedEdges[childNode.id];
}
};
/**
- * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
- * has to be opened based on the current zoom level.
- *
- * @private
- */
- exports._openClusters = function(recursive,force) {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- this._expandClusterNode(node,recursive,force);
- this._updateCalculationNodes();
- }
- };
-
- /**
- * This function checks if a node has to be opened. This is done by checking the zoom level.
- * If the node contains child nodes, this function is recursively called on the child nodes as well.
- * This recursive behaviour is optional and can be set by the recursive argument.
+ * When loops are clustered, an edge can be both in the rerouted array and the contained array.
+ * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
+ * parentNode
*
- * @param {Node} parentNode | to check for cluster and expand
- * @param {Boolean} recursive | enabled or disable recursive calling
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} [openAll] | This will recursively force all nodes in the parent to be released
+ * @param parentNode | Node object
* @private
*/
- exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
- // first check if node is a cluster
- if (parentNode.clusterSize > 1) {
- // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
- if (parentNode.clusterSize < this.constants.clustering.sectorThreshold) {
- openAll = true;
- }
- recursive = openAll ? true : recursive;
-
- // if the last child has been added on a smaller scale than current scale decluster
- if (parentNode.formationScale < this.scale || force == true) {
- // we will check if any of the contained child nodes should be removed from the cluster
- for (var containedNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
- var childNode = parentNode.containedNodes[containedNodeId];
-
- // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
- // the largest cluster is the one that comes from outside
- if (force == true) {
- if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
- || openAll) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- else {
- if (this._nodeInActiveArea(parentNode)) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- }
- }
+ exports._validateEdges = function(parentNode) {
+ for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
+ var edge = parentNode.dynamicEdges[i];
+ if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
+ parentNode.dynamicEdges.splice(i,1);
}
}
};
+
/**
- * ONLY CALLED FROM _expandClusterNode
- *
- * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
- * the child node from the parent contained_node object and put it back into the global nodes object.
- * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
+ * This function released the contained edges back into the global domain and puts them back into the
+ * dynamic edges of both parent and child.
*
- * @param {Node} parentNode | the parent node
- * @param {String} containedNodeId | child_node id as it is contained in the containedNodes object of the parent node
- * @param {Boolean} recursive | This will also check if the child needs to be expanded.
- * With force and recursive both true, the entire cluster is unpacked
- * @param {Boolean} force | This will disregard the zoom level and will expel this child from the parent
- * @param {Boolean} openAll | This will recursively force all nodes in the parent to be released
+ * @param {Node} parentNode |
+ * @param {Node} childNode |
* @private
*/
- exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
- var childNode = parentNode.containedNodes[containedNodeId];
+ exports._releaseContainedEdges = function(parentNode, childNode) {
+ for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
+ var edge = parentNode.containedEdges[childNode.id][i];
- // if child node has been added on smaller scale than current, kick out
- if (childNode.formationScale < this.scale || force == true) {
- // unselect all selected items
- this._unselectAll();
+ // put the edge back in the global edges object
+ this.edges[edge.id] = edge;
- // put the child node back in the global nodes object
- this.nodes[containedNodeId] = childNode;
+ // put the edge back in the dynamic edges of the child and parent
+ childNode.dynamicEdges.push(edge);
+ parentNode.dynamicEdges.push(edge);
+ }
+ // remove the entry from the contained edges
+ delete parentNode.containedEdges[childNode.id];
- // release the contained edges from this childNode back into the global edges
- this._releaseContainedEdges(parentNode,childNode);
+ };
- // reconnect rerouted edges to the childNode
- this._connectEdgeBackToChild(parentNode,childNode);
- // validate all edges in dynamicEdges
- this._validateEdges(parentNode);
- // undo the changes from the clustering operation on the parent node
- parentNode.options.mass -= childNode.options.mass;
- parentNode.clusterSize -= childNode.clusterSize;
- parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
- parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
- // place the child node near the parent, not at the exact same location to avoid chaos in the system
- childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
- childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
+ // ------------------- UTILITY FUNCTIONS ---------------------------- //
- // remove node from the list
- delete parentNode.containedNodes[containedNodeId];
- // check if there are other childs with this clusterSession in the parent.
- var othersPresent = false;
- for (var childNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
- if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
- othersPresent = true;
- break;
- }
+ /**
+ * This updates the node labels for all nodes (for debugging purposes)
+ */
+ exports.updateLabels = function() {
+ var nodeId;
+ // update node labels
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ var node = this.nodes[nodeId];
+ if (node.clusterSize > 1) {
+ node.label = "[".concat(String(node.clusterSize),"]");
}
}
- // if there are no others, remove the cluster session from the list
- if (othersPresent == false) {
- parentNode.clusterSessions.pop();
- }
-
- this._repositionBezierNodes(childNode);
- // this._repositionBezierNodes(parentNode);
-
- // remove the clusterSession from the child node
- childNode.clusterSession = 0;
-
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // restart the simulation to reorganise all nodes
- this.moving = true;
}
- // check if a further expansion step is possible if recursivity is enabled
- if (recursive == true) {
- this._expandClusterNode(childNode,recursive,force,openAll);
+ // update node labels
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.clusterSize == 1) {
+ if (node.originalLabel !== undefined) {
+ node.label = node.originalLabel;
+ }
+ else {
+ node.label = String(node.id);
+ }
+ }
+ }
}
- };
+ // /* Debug Override */
+ // for (nodeId in this.nodes) {
+ // if (this.nodes.hasOwnProperty(nodeId)) {
+ // node = this.nodes[nodeId];
+ // node.label = String(node.level);
+ // }
+ // }
- /**
- * position the bezier nodes at the center of the edges
- *
- * @param node
- * @private
- */
- exports._repositionBezierNodes = function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- node.dynamicEdges[i].positionBezierNode();
- }
};
/**
- * This function checks if any nodes at the end of their trees have edges below a threshold length
- * This function is called only from updateClusters()
- * forceLevelCollapse ignores the length of the edge and collapses one level
- * This means that a node with only one edge will be clustered with its connected node
- *
- * @private
- * @param {Boolean} force
+ * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
+ * if the rest of the nodes are already a few cluster levels in.
+ * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
+ * clustered enough to the clusterToSmallestNeighbours function.
*/
- exports._formClusters = function(force) {
- if (force == false) {
- this._formClustersByZoom();
- }
- else {
- this._forceClustersByZoom();
- }
- };
-
-
- /**
- * This function handles the clustering by zooming out, this is based on a minimum edge distance
- *
- * @private
- */
- exports._formClustersByZoom = function() {
- var dx,dy,length,
- minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-
- // check if any edges are shorter than minLength and start the clustering
- // the clustering favours the node with the larger mass
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- var edge = this.edges[edgeId];
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
+ exports.normalizeClusterLevels = function() {
+ var maxLevel = 0;
+ var minLevel = 1e9;
+ var clusterLevel = 0;
+ var nodeId;
- if (length < minLength) {
- // first check which node is larger
- var parentNode = edge.from;
- var childNode = edge.to;
- if (edge.to.options.mass > edge.from.options.mass) {
- parentNode = edge.to;
- childNode = edge.from;
- }
+ // we loop over all nodes in the list
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ clusterLevel = this.nodes[nodeId].clusterSessions.length;
+ if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
+ if (minLevel > clusterLevel) {minLevel = clusterLevel;}
+ }
+ }
- if (childNode.dynamicEdgesLength == 1) {
- this._addToCluster(parentNode,childNode,false);
- }
- else if (parentNode.dynamicEdgesLength == 1) {
- this._addToCluster(childNode,parentNode,false);
- }
- }
+ if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
+ var amountOfNodes = this.nodeIndices.length;
+ var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
+ // we loop over all nodes in the list
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
+ this._clusterToSmallestNeighbour(this.nodes[nodeId]);
}
}
}
+ this._updateNodeIndexList();
+ this._updateDynamicEdges();
+ // if a cluster was formed, we increase the clusterSession
+ if (this.nodeIndices.length != amountOfNodes) {
+ this.clusterSession += 1;
+ }
}
};
+
+
/**
- * This function forces the network to cluster all nodes with only one connecting edge to their
- * connected node.
+ * This function determines if the cluster we want to decluster is in the active area
+ * this means around the zoom center
*
+ * @param {Node} node
+ * @returns {boolean}
* @private
*/
- exports._forceClustersByZoom = function() {
- for (var nodeId in this.nodes) {
- // another node could have absorbed this child.
- if (this.nodes.hasOwnProperty(nodeId)) {
- var childNode = this.nodes[nodeId];
+ exports._nodeInActiveArea = function(node) {
+ return (
+ Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
+ &&
+ Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
+ )
+ };
- // the edges can be swallowed by another decrease
- if (childNode.dynamicEdgesLength == 1 && childNode.dynamicEdges.length != 0) {
- var edge = childNode.dynamicEdges[0];
- var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
- // group to the largest node
- if (childNode.id != parentNode.id) {
- if (parentNode.options.mass > childNode.options.mass) {
- this._addToCluster(parentNode,childNode,true);
- }
- else {
- this._addToCluster(childNode,parentNode,true);
- }
- }
- }
+ /**
+ * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
+ * It puts large clusters away from the center and randomizes the order.
+ *
+ */
+ exports.repositionNodes = function() {
+ for (var i = 0; i < this.nodeIndices.length; i++) {
+ var node = this.nodes[this.nodeIndices[i]];
+ if ((node.xFixed == false || node.yFixed == false)) {
+ var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.options.mass);
+ var angle = 2 * Math.PI * Math.random();
+ if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
+ if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
+ this._repositionBezierNodes(node);
}
}
};
/**
- * To keep the nodes of roughly equal size we normalize the cluster levels.
- * This function clusters a node to its smallest connected neighbour.
+ * We determine how many connections denote an important hub.
+ * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
*
- * @param node
* @private
*/
- exports._clusterToSmallestNeighbour = function(node) {
- var smallestNeighbour = -1;
- var smallestNeighbourNode = null;
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- if (node.dynamicEdges[i] !== undefined) {
- var neighbour = null;
- if (node.dynamicEdges[i].fromId != node.id) {
- neighbour = node.dynamicEdges[i].from;
- }
- else if (node.dynamicEdges[i].toId != node.id) {
- neighbour = node.dynamicEdges[i].to;
- }
+ exports._getHubSize = function() {
+ var average = 0;
+ var averageSquared = 0;
+ var hubCounter = 0;
+ var largestHub = 0;
+ for (var i = 0; i < this.nodeIndices.length; i++) {
- if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
- smallestNeighbour = neighbour.clusterSessions.length;
- smallestNeighbourNode = neighbour;
- }
+ var node = this.nodes[this.nodeIndices[i]];
+ if (node.dynamicEdgesLength > largestHub) {
+ largestHub = node.dynamicEdgesLength;
}
+ average += node.dynamicEdgesLength;
+ averageSquared += Math.pow(node.dynamicEdgesLength,2);
+ hubCounter += 1;
}
+ average = average / hubCounter;
+ averageSquared = averageSquared / hubCounter;
- if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
- this._addToCluster(neighbour, node, true);
+ var variance = averageSquared - Math.pow(average,2);
+
+ var standardDeviation = Math.sqrt(variance);
+
+ this.hubThreshold = Math.floor(average + 2*standardDeviation);
+
+ // always have at least one to cluster
+ if (this.hubThreshold > largestHub) {
+ this.hubThreshold = largestHub;
}
+
+ // console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
+ // console.log("hubThreshold:",this.hubThreshold);
};
/**
- * This function forms clusters from hubs, it loops over all nodes
+ * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
+ * with this amount we can cluster specifically on these chains.
*
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
+ * @param {Number} fraction | between 0 and 1, the percentage of chains to reduce
* @private
*/
- exports._formClustersByHub = function(force, onlyEqual) {
- // we loop over all nodes in the list
+ exports._reduceAmountOfChains = function(fraction) {
+ this.hubThreshold = 2;
+ var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
for (var nodeId in this.nodes) {
- // we check if it is still available since it can be used by the clustering in this loop
if (this.nodes.hasOwnProperty(nodeId)) {
- this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
+ if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
+ if (reduceAmount > 0) {
+ this._formClusterFromHub(this.nodes[nodeId],true,true,1);
+ reduceAmount -= 1;
+ }
+ }
}
}
};
/**
- * This function forms a cluster from a specific preselected hub node
+ * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
+ * with this amount we can cluster specifically on these chains.
*
- * @param {Node} hubNode | the node we will cluster as a hub
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
- * @param {Number} [absorptionSizeOffset] |
* @private
*/
- exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
- if (absorptionSizeOffset === undefined) {
- absorptionSizeOffset = 0;
- }
- // we decide if the node is a hub
- if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
- (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
- // initialize variables
- var dx,dy,length;
- var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
- var allowCluster = false;
-
- // we create a list of edges because the dynamicEdges change over the course of this loop
- var edgesIdarray = [];
- var amountOfInitialEdges = hubNode.dynamicEdges.length;
- for (var j = 0; j < amountOfInitialEdges; j++) {
- edgesIdarray.push(hubNode.dynamicEdges[j].id);
- }
-
- // if the hub clustering is not forces, we check if one of the edges connected
- // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
- if (force == false) {
- allowCluster = false;
- for (j = 0; j < amountOfInitialEdges; j++) {
- var edge = this.edges[edgesIdarray[j]];
- if (edge !== undefined) {
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
- if (length < minLength) {
- allowCluster = true;
- break;
- }
- }
- }
- }
- }
- }
-
- // start the clustering if allowed
- if ((!force && allowCluster) || force) {
- // we loop over all edges INITIALLY connected to this hub
- for (j = 0; j < amountOfInitialEdges; j++) {
- edge = this.edges[edgesIdarray[j]];
- // the edge can be clustered by this function in a previous loop
- if (edge !== undefined) {
- var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
- // we do not want hubs to merge with other hubs nor do we want to cluster itself.
- if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
- (childNode.id != hubNode.id)) {
- this._addToCluster(hubNode,childNode,force);
- }
- }
+ exports._getChainFraction = function() {
+ var chains = 0;
+ var total = 0;
+ for (var nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
+ chains += 1;
}
+ total += 1;
}
}
+ return chains/total;
};
+/***/ },
+/* 64 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var util = __webpack_require__(1);
+ var Node = __webpack_require__(53);
/**
- * This function adds the child node to the parent node, creating a cluster if it is not already.
+ * Creation of the SectorMixin var.
*
- * @param {Node} parentNode | this is the node that will house the child node
- * @param {Node} childNode | this node will be deleted from the global this.nodes and stored in the parent node
- * @param {Boolean} force | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
- * @private
+ * This contains all the functions the Network object can use to employ the sector system.
+ * The sector system is always used by Network, though the benefits only apply to the use of clustering.
+ * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
*/
- exports._addToCluster = function(parentNode, childNode, force) {
- // join child node in the parent node
- parentNode.containedNodes[childNode.id] = childNode;
-
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < childNode.dynamicEdges.length; i++) {
- var edge = childNode.dynamicEdges[i];
- if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
- this._addToContainedEdges(parentNode,childNode,edge);
- }
- else {
- this._connectEdgeToCluster(parentNode,childNode,edge);
- }
- }
- // a contained node has no dynamic edges.
- childNode.dynamicEdges = [];
-
- // remove circular edges from clusters
- this._containCircularEdgesFromNode(parentNode,childNode);
-
-
- // remove the childNode from the global nodes object
- delete this.nodes[childNode.id];
- // update the properties of the child and parent
- var massBefore = parentNode.options.mass;
- childNode.clusterSession = this.clusterSession;
- parentNode.options.mass += childNode.options.mass;
- parentNode.clusterSize += childNode.clusterSize;
- parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
+ /**
+ * This function is only called by the setData function of the Network object.
+ * This loads the global references into the active sector. This initializes the sector.
+ *
+ * @private
+ */
+ exports._putDataInSector = function() {
+ this.sectors["active"][this._sector()].nodes = this.nodes;
+ this.sectors["active"][this._sector()].edges = this.edges;
+ this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
+ };
- // keep track of the clustersessions so we can open the cluster up as it has been formed.
- if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
- parentNode.clusterSessions.push(this.clusterSession);
- }
- // forced clusters only open from screen size and double tap
- if (force == true) {
- // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
- parentNode.formationScale = 0;
+ /**
+ * /**
+ * This function sets the global references to nodes, edges and nodeIndices back to
+ * those of the supplied (active) sector. If a type is defined, do the specific type
+ *
+ * @param {String} sectorId
+ * @param {String} [sectorType] | "active" or "frozen"
+ * @private
+ */
+ exports._switchToSector = function(sectorId, sectorType) {
+ if (sectorType === undefined || sectorType == "active") {
+ this._switchToActiveSector(sectorId);
}
else {
- parentNode.formationScale = this.scale; // The latest child has been added on this scale
+ this._switchToFrozenSector(sectorId);
}
+ };
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // set the pop-out scale for the childnode
- parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
- // nullify the movement velocity of the child, this is to avoid hectic behaviour
- childNode.clearVelocity();
+ /**
+ * This function sets the global references to nodes, edges and nodeIndices back to
+ * those of the supplied active sector.
+ *
+ * @param sectorId
+ * @private
+ */
+ exports._switchToActiveSector = function(sectorId) {
+ this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
+ this.nodes = this.sectors["active"][sectorId]["nodes"];
+ this.edges = this.sectors["active"][sectorId]["edges"];
+ };
- // the mass has altered, preservation of energy dictates the velocity to be updated
- parentNode.updateVelocity(massBefore);
- // restart the simulation to reorganise all nodes
- this.moving = true;
+ /**
+ * This function sets the global references to nodes, edges and nodeIndices back to
+ * those of the supplied active sector.
+ *
+ * @private
+ */
+ exports._switchToSupportSector = function() {
+ this.nodeIndices = this.sectors["support"]["nodeIndices"];
+ this.nodes = this.sectors["support"]["nodes"];
+ this.edges = this.sectors["support"]["edges"];
};
/**
- * This function will apply the changes made to the remainingEdges during the formation of the clusters.
- * This is a seperate function to allow for level-wise collapsing of the node barnesHutTree.
- * It has to be called if a level is collapsed. It is called by _formClusters().
+ * This function sets the global references to nodes, edges and nodeIndices back to
+ * those of the supplied frozen sector.
+ *
+ * @param sectorId
* @private
*/
- exports._updateDynamicEdges = function() {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- node.dynamicEdgesLength = node.dynamicEdges.length;
-
- // this corrects for multiple edges pointing at the same other node
- var correction = 0;
- if (node.dynamicEdgesLength > 1) {
- for (var j = 0; j < node.dynamicEdgesLength - 1; j++) {
- var edgeToId = node.dynamicEdges[j].toId;
- var edgeFromId = node.dynamicEdges[j].fromId;
- for (var k = j+1; k < node.dynamicEdgesLength; k++) {
- if ((node.dynamicEdges[k].toId == edgeToId && node.dynamicEdges[k].fromId == edgeFromId) ||
- (node.dynamicEdges[k].fromId == edgeToId && node.dynamicEdges[k].toId == edgeFromId)) {
- correction += 1;
- }
- }
- }
- }
- node.dynamicEdgesLength -= correction;
- }
+ exports._switchToFrozenSector = function(sectorId) {
+ this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
+ this.nodes = this.sectors["frozen"][sectorId]["nodes"];
+ this.edges = this.sectors["frozen"][sectorId]["edges"];
};
/**
- * This adds an edge from the childNode to the contained edges of the parent node
+ * This function sets the global references to nodes, edges and nodeIndices back to
+ * those of the currently active sector.
*
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
* @private
*/
- exports._addToContainedEdges = function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- if (!(parentNode.containedEdges.hasOwnProperty(childNode.id))) {
- parentNode.containedEdges[childNode.id] = []
- }
- // add this edge to the list
- parentNode.containedEdges[childNode.id].push(edge);
+ exports._loadLatestSector = function() {
+ this._switchToSector(this._sector());
+ };
- // remove the edge from the global edges object
- delete this.edges[edge.id];
- // remove the edge from the parent object
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- if (parentNode.dynamicEdges[i].id == edge.id) {
- parentNode.dynamicEdges.splice(i,1);
- break;
- }
- }
+ /**
+ * This function returns the currently active sector Id
+ *
+ * @returns {String}
+ * @private
+ */
+ exports._sector = function() {
+ return this.activeSector[this.activeSector.length-1];
};
+
/**
- * This function connects an edge that was connected to a child node to the parent node.
- * It keeps track of which nodes it has been connected to with the originalId array.
+ * This function returns the previously active sector Id
*
- * @param {Node} parentNode | Node object
- * @param {Node} childNode | Node object
- * @param {Edge} edge | Edge object
+ * @returns {String}
* @private
*/
- exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
+ exports._previousSector = function() {
+ if (this.activeSector.length > 1) {
+ return this.activeSector[this.activeSector.length-2];
}
else {
- if (edge.toId == childNode.id) { // edge connected to other node on the "to" side
- edge.originalToId.push(childNode.id);
- edge.to = parentNode;
- edge.toId = parentNode.id;
- }
- else { // edge connected to other node with the "from" side
-
- edge.originalFromId.push(childNode.id);
- edge.from = parentNode;
- edge.fromId = parentNode.id;
- }
-
- this._addToReroutedEdges(parentNode,childNode,edge);
+ throw new TypeError('there are not enough sectors in the this.activeSector array.');
}
};
/**
- * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
- * these edges inside of the cluster.
+ * We add the active sector at the end of the this.activeSector array
+ * This ensures it is the currently active sector returned by _sector() and it reaches the top
+ * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack.
*
- * @param parentNode
- * @param childNode
+ * @param newId
* @private
*/
- exports._containCircularEdgesFromNode = function(parentNode, childNode) {
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
- }
- }
+ exports._setActiveSector = function(newId) {
+ this.activeSector.push(newId);
};
/**
- * This adds an edge from the childNode to the rerouted edges of the parent node
+ * We remove the currently active sector id from the active sector stack. This happens when
+ * we reactivate the previously active sector
*
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
* @private
*/
- exports._addToReroutedEdges = function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- // we store the edge in the rerouted edges so we can restore it when the cluster pops open
- if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
- parentNode.reroutedEdges[childNode.id] = [];
- }
- parentNode.reroutedEdges[childNode.id].push(edge);
-
- // this edge becomes part of the dynamicEdges of the cluster node
- parentNode.dynamicEdges.push(edge);
- };
-
+ exports._forgetLastSector = function() {
+ this.activeSector.pop();
+ };
/**
- * This function connects an edge that was connected to a cluster node back to the child node.
+ * This function creates a new active sector with the supplied newId. This newId
+ * is the expanding node id.
*
- * @param parentNode | Node object
- * @param childNode | Node object
- * @private
- */
- exports._connectEdgeBackToChild = function(parentNode, childNode) {
- if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
- for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
- var edge = parentNode.reroutedEdges[childNode.id][i];
- if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
- edge.originalFromId.pop();
- edge.fromId = childNode.id;
- edge.from = childNode;
- }
- else {
- edge.originalToId.pop();
- edge.toId = childNode.id;
- edge.to = childNode;
- }
-
- // append this edge to the list of edges connecting to the childnode
- childNode.dynamicEdges.push(edge);
-
- // remove the edge from the parent object
- for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
- if (parentNode.dynamicEdges[j].id == edge.id) {
- parentNode.dynamicEdges.splice(j,1);
- break;
- }
- }
- }
- // remove the entry from the rerouted edges
- delete parentNode.reroutedEdges[childNode.id];
- }
- };
-
-
- /**
- * When loops are clustered, an edge can be both in the rerouted array and the contained array.
- * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
- * parentNode
- *
- * @param parentNode | Node object
- * @private
- */
- exports._validateEdges = function(parentNode) {
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
- parentNode.dynamicEdges.splice(i,1);
- }
- }
- };
-
-
- /**
- * This function released the contained edges back into the global domain and puts them back into the
- * dynamic edges of both parent and child.
- *
- * @param {Node} parentNode |
- * @param {Node} childNode |
- * @private
- */
- exports._releaseContainedEdges = function(parentNode, childNode) {
- for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
- var edge = parentNode.containedEdges[childNode.id][i];
-
- // put the edge back in the global edges object
- this.edges[edge.id] = edge;
-
- // put the edge back in the dynamic edges of the child and parent
- childNode.dynamicEdges.push(edge);
- parentNode.dynamicEdges.push(edge);
- }
- // remove the entry from the contained edges
- delete parentNode.containedEdges[childNode.id];
-
- };
-
-
-
-
- // ------------------- UTILITY FUNCTIONS ---------------------------- //
-
-
- /**
- * This updates the node labels for all nodes (for debugging purposes)
- */
- exports.updateLabels = function() {
- var nodeId;
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.clusterSize > 1) {
- node.label = "[".concat(String(node.clusterSize),"]");
- }
- }
- }
-
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.clusterSize == 1) {
- if (node.originalLabel !== undefined) {
- node.label = node.originalLabel;
- }
- else {
- node.label = String(node.id);
- }
- }
- }
- }
-
- // /* Debug Override */
- // for (nodeId in this.nodes) {
- // if (this.nodes.hasOwnProperty(nodeId)) {
- // node = this.nodes[nodeId];
- // node.label = String(node.level);
- // }
- // }
-
- };
-
-
- /**
- * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
- * if the rest of the nodes are already a few cluster levels in.
- * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
- * clustered enough to the clusterToSmallestNeighbours function.
- */
- exports.normalizeClusterLevels = function() {
- var maxLevel = 0;
- var minLevel = 1e9;
- var clusterLevel = 0;
- var nodeId;
-
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- clusterLevel = this.nodes[nodeId].clusterSessions.length;
- if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
- if (minLevel > clusterLevel) {minLevel = clusterLevel;}
- }
- }
-
- if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
- var amountOfNodes = this.nodeIndices.length;
- var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
- this._clusterToSmallestNeighbour(this.nodes[nodeId]);
- }
- }
- }
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
- }
- };
-
-
-
- /**
- * This function determines if the cluster we want to decluster is in the active area
- * this means around the zoom center
- *
- * @param {Node} node
- * @returns {boolean}
- * @private
- */
- exports._nodeInActiveArea = function(node) {
- return (
- Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
- &&
- Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
- )
- };
-
-
- /**
- * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
- * It puts large clusters away from the center and randomizes the order.
- *
- */
- exports.repositionNodes = function() {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- if ((node.xFixed == false || node.yFixed == false)) {
- var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.options.mass);
- var angle = 2 * Math.PI * Math.random();
- if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
- if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
- this._repositionBezierNodes(node);
- }
- }
- };
-
-
- /**
- * We determine how many connections denote an important hub.
- * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
- *
- * @private
- */
- exports._getHubSize = function() {
- var average = 0;
- var averageSquared = 0;
- var hubCounter = 0;
- var largestHub = 0;
-
- for (var i = 0; i < this.nodeIndices.length; i++) {
-
- var node = this.nodes[this.nodeIndices[i]];
- if (node.dynamicEdgesLength > largestHub) {
- largestHub = node.dynamicEdgesLength;
- }
- average += node.dynamicEdgesLength;
- averageSquared += Math.pow(node.dynamicEdgesLength,2);
- hubCounter += 1;
- }
- average = average / hubCounter;
- averageSquared = averageSquared / hubCounter;
-
- var variance = averageSquared - Math.pow(average,2);
-
- var standardDeviation = Math.sqrt(variance);
-
- this.hubThreshold = Math.floor(average + 2*standardDeviation);
-
- // always have at least one to cluster
- if (this.hubThreshold > largestHub) {
- this.hubThreshold = largestHub;
- }
-
- // console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
- // console.log("hubThreshold:",this.hubThreshold);
- };
-
-
- /**
- * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @param {Number} fraction | between 0 and 1, the percentage of chains to reduce
- * @private
- */
- exports._reduceAmountOfChains = function(fraction) {
- this.hubThreshold = 2;
- var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
- if (reduceAmount > 0) {
- this._formClusterFromHub(this.nodes[nodeId],true,true,1);
- reduceAmount -= 1;
- }
- }
- }
- }
- };
-
- /**
- * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @private
- */
- exports._getChainFraction = function() {
- var chains = 0;
- var total = 0;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
- chains += 1;
- }
- total += 1;
- }
- }
- return chains/total;
- };
-
-
-/***/ },
-/* 65 */
-/***/ function(module, exports, __webpack_require__) {
-
- var util = __webpack_require__(1);
- var Node = __webpack_require__(53);
-
- /**
- * Creation of the SectorMixin var.
- *
- * This contains all the functions the Network object can use to employ the sector system.
- * The sector system is always used by Network, though the benefits only apply to the use of clustering.
- * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
- */
-
- /**
- * This function is only called by the setData function of the Network object.
- * This loads the global references into the active sector. This initializes the sector.
- *
- * @private
- */
- exports._putDataInSector = function() {
- this.sectors["active"][this._sector()].nodes = this.nodes;
- this.sectors["active"][this._sector()].edges = this.edges;
- this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
- };
-
-
- /**
- * /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied (active) sector. If a type is defined, do the specific type
- *
- * @param {String} sectorId
- * @param {String} [sectorType] | "active" or "frozen"
- * @private
- */
- exports._switchToSector = function(sectorId, sectorType) {
- if (sectorType === undefined || sectorType == "active") {
- this._switchToActiveSector(sectorId);
- }
- else {
- this._switchToFrozenSector(sectorId);
- }
- };
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied active sector.
- *
- * @param sectorId
- * @private
- */
- exports._switchToActiveSector = function(sectorId) {
- this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["active"][sectorId]["nodes"];
- this.edges = this.sectors["active"][sectorId]["edges"];
- };
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied active sector.
- *
- * @private
- */
- exports._switchToSupportSector = function() {
- this.nodeIndices = this.sectors["support"]["nodeIndices"];
- this.nodes = this.sectors["support"]["nodes"];
- this.edges = this.sectors["support"]["edges"];
- };
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied frozen sector.
- *
- * @param sectorId
- * @private
- */
- exports._switchToFrozenSector = function(sectorId) {
- this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["frozen"][sectorId]["nodes"];
- this.edges = this.sectors["frozen"][sectorId]["edges"];
- };
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the currently active sector.
- *
- * @private
- */
- exports._loadLatestSector = function() {
- this._switchToSector(this._sector());
- };
-
-
- /**
- * This function returns the currently active sector Id
- *
- * @returns {String}
- * @private
- */
- exports._sector = function() {
- return this.activeSector[this.activeSector.length-1];
- };
-
-
- /**
- * This function returns the previously active sector Id
- *
- * @returns {String}
- * @private
- */
- exports._previousSector = function() {
- if (this.activeSector.length > 1) {
- return this.activeSector[this.activeSector.length-2];
- }
- else {
- throw new TypeError('there are not enough sectors in the this.activeSector array.');
- }
- };
-
-
- /**
- * We add the active sector at the end of the this.activeSector array
- * This ensures it is the currently active sector returned by _sector() and it reaches the top
- * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack.
- *
- * @param newId
- * @private
- */
- exports._setActiveSector = function(newId) {
- this.activeSector.push(newId);
- };
-
-
- /**
- * We remove the currently active sector id from the active sector stack. This happens when
- * we reactivate the previously active sector
- *
- * @private
- */
- exports._forgetLastSector = function() {
- this.activeSector.pop();
- };
-
-
- /**
- * This function creates a new active sector with the supplied newId. This newId
- * is the expanding node id.
- *
- * @param {String} newId | Id of the new active sector
+ * @param {String} newId | Id of the new active sector
* @private
*/
exports._createNewSector = function(newId) {
@@ -31750,7 +31399,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 66 */
+/* 65 */
/***/ function(module, exports, __webpack_require__) {
var Node = __webpack_require__(53);
@@ -32464,7 +32113,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 67 */
+/* 66 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
@@ -33150,7 +32799,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 68 */
+/* 67 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
@@ -33330,7 +32979,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 69 */
+/* 68 */
/***/ function(module, exports, __webpack_require__) {
exports._resetLevels = function() {
@@ -33747,275 +33396,631 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
-/* 70 */
+/* 69 */
/***/ function(module, exports, __webpack_require__) {
- // English
- exports['en'] = {
- edit: 'Edit',
- del: 'Delete selected',
- back: 'Back',
- addNode: 'Add Node',
- addEdge: 'Add Edge',
- editNode: 'Edit Node',
- editEdge: 'Edit Edge',
- addDescription: 'Click in an empty space to place a new node.',
- edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
- editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
- createEdgeError: 'Cannot link edges to a cluster.',
- deleteClusterError: 'Clusters cannot be deleted.'
+ /**
+ * Calculate the forces the nodes apply on each other based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ exports._calculateNodeForces = function () {
+ var dx, dy, angle, distance, fx, fy, combinedClusterSize,
+ repulsingForce, node1, node2, i, j;
+
+ var nodes = this.calculationNodes;
+ var nodeIndices = this.calculationNodeIndices;
+
+ // approximation constants
+ var a_base = -2 / 3;
+ var b = 4 / 3;
+
+ // repulsing forces between nodes
+ var nodeDistance = this.constants.physics.repulsion.nodeDistance;
+ var minimumDistance = nodeDistance;
+
+ // we loop from i over all but the last entree in the array
+ // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+ for (i = 0; i < nodeIndices.length - 1; i++) {
+ node1 = nodes[nodeIndices[i]];
+ for (j = i + 1; j < nodeIndices.length; j++) {
+ node2 = nodes[nodeIndices[j]];
+ combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
+
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
+ var a = a_base / minimumDistance;
+ if (distance < 2 * minimumDistance) {
+ if (distance < 0.5 * minimumDistance) {
+ repulsingForce = 1.0;
+ }
+ else {
+ repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+ }
+
+ // amplify the repulsion for clusters.
+ repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
+ repulsingForce = repulsingForce / distance;
+
+ fx = dx * repulsingForce;
+ fy = dy * repulsingForce;
+
+ node1.fx -= fx;
+ node1.fy -= fy;
+ node2.fx += fx;
+ node2.fy += fy;
+ }
+ }
+ }
};
- exports['en_EN'] = exports['en'];
- exports['en_US'] = exports['en'];
- // Dutch
- exports['nl'] = {
- edit: 'Wijzigen',
- del: 'Selectie verwijderen',
- back: 'Terug',
- addNode: 'Node toevoegen',
- addEdge: 'Link toevoegen',
- editNode: 'Node wijzigen',
- editEdge: 'Link wijzigen',
- addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
- edgeDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
- editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.',
- createEdgeError: 'Kan geen link maken naar een cluster.',
- deleteClusterError: 'Clusters kunnen niet worden verwijderd.'
+
+/***/ },
+/* 70 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Calculate the forces the nodes apply on eachother based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ exports._calculateNodeForces = function () {
+ var dx, dy, distance, fx, fy,
+ repulsingForce, node1, node2, i, j;
+
+ var nodes = this.calculationNodes;
+ var nodeIndices = this.calculationNodeIndices;
+
+ // repulsing forces between nodes
+ var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
+
+ // we loop from i over all but the last entree in the array
+ // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+ for (i = 0; i < nodeIndices.length - 1; i++) {
+ node1 = nodes[nodeIndices[i]];
+ for (j = i + 1; j < nodeIndices.length; j++) {
+ node2 = nodes[nodeIndices[j]];
+
+ // nodes only affect nodes on their level
+ if (node1.level == node2.level) {
+
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+
+ var steepness = 0.05;
+ if (distance < nodeDistance) {
+ repulsingForce = -Math.pow(steepness*distance,2) + Math.pow(steepness*nodeDistance,2);
+ }
+ else {
+ repulsingForce = 0;
+ }
+ // normalize force with
+ if (distance == 0) {
+ distance = 0.01;
+ }
+ else {
+ repulsingForce = repulsingForce / distance;
+ }
+ fx = dx * repulsingForce;
+ fy = dy * repulsingForce;
+
+ node1.fx -= fx;
+ node1.fy -= fy;
+ node2.fx += fx;
+ node2.fy += fy;
+ }
+ }
+ }
};
- exports['nl_NL'] = exports['nl'];
- exports['nl_BE'] = exports['nl'];
+ /**
+ * this function calculates the effects of the springs in the case of unsmooth curves.
+ *
+ * @private
+ */
+ exports._calculateHierarchicalSpringForces = function () {
+ var edgeLength, edge, edgeId;
+ var dx, dy, fx, fy, springForce, distance;
+ var edges = this.edges;
+
+ var nodes = this.calculationNodes;
+ var nodeIndices = this.calculationNodeIndices;
+
+
+ for (var i = 0; i < nodeIndices.length; i++) {
+ var node1 = nodes[nodeIndices[i]];
+ node1.springFx = 0;
+ node1.springFy = 0;
+ }
+
+
+ // forces caused by the edges, modelled as springs
+ for (edgeId in edges) {
+ if (edges.hasOwnProperty(edgeId)) {
+ edge = edges[edgeId];
+ if (edge.connected) {
+ // only calculate forces if nodes are in the same sector
+ if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
+ edgeLength = edge.physics.springLength;
+ // this implies that the edges between big clusters are longer
+ edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
+
+ dx = (edge.from.x - edge.to.x);
+ dy = (edge.from.y - edge.to.y);
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance == 0) {
+ distance = 0.01;
+ }
+
+ // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+ springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
+
+ fx = dx * springForce;
+ fy = dy * springForce;
+
+
+
+ if (edge.to.level != edge.from.level) {
+ edge.to.springFx -= fx;
+ edge.to.springFy -= fy;
+ edge.from.springFx += fx;
+ edge.from.springFy += fy;
+ }
+ else {
+ var factor = 0.5;
+ edge.to.fx -= factor*fx;
+ edge.to.fy -= factor*fy;
+ edge.from.fx += factor*fx;
+ edge.from.fy += factor*fy;
+ }
+ }
+ }
+ }
+ }
+
+ // normalize spring forces
+ var springForce = 1;
+ var springFx, springFy;
+ for (i = 0; i < nodeIndices.length; i++) {
+ var node = nodes[nodeIndices[i]];
+ springFx = Math.min(springForce,Math.max(-springForce,node.springFx));
+ springFy = Math.min(springForce,Math.max(-springForce,node.springFy));
+
+ node.fx += springFx;
+ node.fy += springFy;
+ }
+
+ // retain energy balance
+ var totalFx = 0;
+ var totalFy = 0;
+ for (i = 0; i < nodeIndices.length; i++) {
+ var node = nodes[nodeIndices[i]];
+ totalFx += node.fx;
+ totalFy += node.fy;
+ }
+ var correctionFx = totalFx / nodeIndices.length;
+ var correctionFy = totalFy / nodeIndices.length;
+
+ for (i = 0; i < nodeIndices.length; i++) {
+ var node = nodes[nodeIndices[i]];
+ node.fx -= correctionFx;
+ node.fy -= correctionFy;
+ }
+
+ };
+
/***/ },
/* 71 */
/***/ function(module, exports, __webpack_require__) {
/**
- * Canvas shapes used by Network
+ * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+ * The Barnes Hut method is used to speed up this N-body simulation.
+ *
+ * @private
*/
- if (typeof CanvasRenderingContext2D !== 'undefined') {
+ exports._calculateNodeForces = function() {
+ if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
+ var node;
+ var nodes = this.calculationNodes;
+ var nodeIndices = this.calculationNodeIndices;
+ var nodeCount = nodeIndices.length;
- /**
- * Draw a circle shape
- */
- CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
- this.beginPath();
- this.arc(x, y, r, 0, 2*Math.PI, false);
- };
+ this._formBarnesHutTree(nodes,nodeIndices);
- /**
- * Draw a square shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r size, width and height of the square
- */
- CanvasRenderingContext2D.prototype.square = function(x, y, r) {
- this.beginPath();
- this.rect(x - r, y - r, r * 2, r * 2);
- };
+ var barnesHutTree = this.barnesHutTree;
- /**
- * Draw a triangle shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
+ // place the nodes one by one recursively
+ for (var i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ // starting with root is irrelevant, it never passes the BarnesHut condition
+ this._getForceContribution(barnesHutTree.root.children.NW,node);
+ this._getForceContribution(barnesHutTree.root.children.NE,node);
+ this._getForceContribution(barnesHutTree.root.children.SW,node);
+ this._getForceContribution(barnesHutTree.root.children.SE,node);
+ }
+ }
+ }
+ };
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
- this.moveTo(x, y - (h - ir));
- this.lineTo(x + s2, y + ir);
- this.lineTo(x - s2, y + ir);
- this.lineTo(x, y - (h - ir));
- this.closePath();
- };
+ /**
+ * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+ * If a region contains a single node, we check if it is not itself, then we apply the force.
+ *
+ * @param parentBranch
+ * @param node
+ * @private
+ */
+ exports._getForceContribution = function(parentBranch,node) {
+ // we get no force contribution from an empty region
+ if (parentBranch.childrenCount > 0) {
+ var dx,dy,distance;
- /**
- * Draw a triangle shape in downward orientation
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius
- */
- CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
+ // get the distance from the center of mass to the node.
+ dx = parentBranch.centerOfMass.x - node.x;
+ dy = parentBranch.centerOfMass.y - node.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
+ // BarnesHut condition
+ // original condition : s/d < theta = passed === d/s > 1/theta = passed
+ // calcSize = 1/s --> d * 1/s > 1/theta = passed
+ if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
+ // duplicate code to reduce function calls to speed up program
+ if (distance == 0) {
+ distance = 0.1*Math.random();
+ dx = distance;
+ }
+ var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
+ var fx = dx * gravityForce;
+ var fy = dy * gravityForce;
+ node.fx += fx;
+ node.fy += fy;
+ }
+ else {
+ // Did not pass the condition, go into children if available
+ if (parentBranch.childrenCount == 4) {
+ this._getForceContribution(parentBranch.children.NW,node);
+ this._getForceContribution(parentBranch.children.NE,node);
+ this._getForceContribution(parentBranch.children.SW,node);
+ this._getForceContribution(parentBranch.children.SE,node);
+ }
+ else { // parentBranch must have only one node, if it was empty we wouldnt be here
+ if (parentBranch.children.data.id != node.id) { // if it is not self
+ // duplicate code to reduce function calls to speed up program
+ if (distance == 0) {
+ distance = 0.5*Math.random();
+ dx = distance;
+ }
+ var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
+ var fx = dx * gravityForce;
+ var fy = dy * gravityForce;
+ node.fx += fx;
+ node.fy += fy;
+ }
+ }
+ }
+ }
+ };
- this.moveTo(x, y + (h - ir));
- this.lineTo(x + s2, y - ir);
- this.lineTo(x - s2, y - ir);
- this.lineTo(x, y + (h - ir));
- this.closePath();
- };
+ /**
+ * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+ *
+ * @param nodes
+ * @param nodeIndices
+ * @private
+ */
+ exports._formBarnesHutTree = function(nodes,nodeIndices) {
+ var node;
+ var nodeCount = nodeIndices.length;
- /**
- * Draw a star shape, a star with 5 points
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.star = function(x, y, r) {
- // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
- this.beginPath();
+ var minX = Number.MAX_VALUE,
+ minY = Number.MAX_VALUE,
+ maxX =-Number.MAX_VALUE,
+ maxY =-Number.MAX_VALUE;
- for (var n = 0; n < 10; n++) {
- var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
- this.lineTo(
- x + radius * Math.sin(n * 2 * Math.PI / 10),
- y - radius * Math.cos(n * 2 * Math.PI / 10)
- );
+ // get the range of the nodes
+ for (var i = 0; i < nodeCount; i++) {
+ var x = nodes[nodeIndices[i]].x;
+ var y = nodes[nodeIndices[i]].y;
+ if (nodes[nodeIndices[i]].options.mass > 0) {
+ if (x < minX) { minX = x; }
+ if (x > maxX) { maxX = x; }
+ if (y < minY) { minY = y; }
+ if (y > maxY) { maxY = y; }
}
+ }
+ // make the range a square
+ var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+ if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
+ else {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
- this.closePath();
- };
- /**
- * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
- */
- CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
- var r2d = Math.PI/180;
- if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
- if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
- this.beginPath();
- this.moveTo(x+r,y);
- this.lineTo(x+w-r,y);
- this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
- this.lineTo(x+w,y+h-r);
- this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
- this.lineTo(x+r,y+h);
- this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
- this.lineTo(x,y+r);
- this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+ var minimumTreeSize = 1e-5;
+ var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
+ var halfRootSize = 0.5 * rootSize;
+ var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+ // construct the barnesHutTree
+ var barnesHutTree = {
+ root:{
+ centerOfMass: {x:0, y:0},
+ mass:0,
+ range: {
+ minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
+ minY: centerY-halfRootSize,maxY:centerY+halfRootSize
+ },
+ size: rootSize,
+ calcSize: 1 / rootSize,
+ children: { data:null},
+ maxWidth: 0,
+ level: 0,
+ childrenCount: 4
+ }
};
+ this._splitBranch(barnesHutTree.root);
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
- var kappa = .5522848,
- ox = (w / 2) * kappa, // control point offset horizontal
- oy = (h / 2) * kappa, // control point offset vertical
- xe = x + w, // x-end
- ye = y + h, // y-end
- xm = x + w / 2, // x-middle
- ym = y + h / 2; // y-middle
+ // place the nodes one by one recursively
+ for (i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ this._placeInTree(barnesHutTree.root,node);
+ }
+ }
- this.beginPath();
- this.moveTo(x, ym);
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- };
+ // make global
+ this.barnesHutTree = barnesHutTree
+ };
+ /**
+ * this updates the mass of a branch. this is increased by adding a node.
+ *
+ * @param parentBranch
+ * @param node
+ * @private
+ */
+ exports._updateBranchMass = function(parentBranch, node) {
+ var totalMass = parentBranch.mass + node.options.mass;
+ var totalMassInv = 1/totalMass;
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
- var f = 1/3;
- var wEllipse = w;
- var hEllipse = h * f;
+ parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
+ parentBranch.centerOfMass.x *= totalMassInv;
- var kappa = .5522848,
- ox = (wEllipse / 2) * kappa, // control point offset horizontal
- oy = (hEllipse / 2) * kappa, // control point offset vertical
- xe = x + wEllipse, // x-end
- ye = y + hEllipse, // y-end
- xm = x + wEllipse / 2, // x-middle
- ym = y + hEllipse / 2, // y-middle
- ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
- yeb = y + h; // y-end, bottom ellipse
+ parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
+ parentBranch.centerOfMass.y *= totalMassInv;
- this.beginPath();
- this.moveTo(xe, ym);
+ parentBranch.mass = totalMass;
+ var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
+ parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- this.lineTo(xe, ymb);
+ /**
+ * determine in which branch the node will be placed.
+ *
+ * @param parentBranch
+ * @param node
+ * @param skipMassUpdate
+ * @private
+ */
+ exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
+ if (skipMassUpdate != true || skipMassUpdate === undefined) {
+ // update the mass of the branch.
+ this._updateBranchMass(parentBranch,node);
+ }
- this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
- this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+ if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+ if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+ this._placeInRegion(parentBranch,node,"NW");
+ }
+ else { // in SW
+ this._placeInRegion(parentBranch,node,"SW");
+ }
+ }
+ else { // in NE or SE
+ if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+ this._placeInRegion(parentBranch,node,"NE");
+ }
+ else { // in SE
+ this._placeInRegion(parentBranch,node,"SE");
+ }
+ }
+ };
- this.lineTo(x, ym);
- };
+
+ /**
+ * actually place the node in a region (or branch)
+ *
+ * @param parentBranch
+ * @param node
+ * @param region
+ * @private
+ */
+ exports._placeInRegion = function(parentBranch,node,region) {
+ switch (parentBranch.children[region].childrenCount) {
+ case 0: // place node here
+ parentBranch.children[region].children.data = node;
+ parentBranch.children[region].childrenCount = 1;
+ this._updateBranchMass(parentBranch.children[region],node);
+ break;
+ case 1: // convert into children
+ // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+ // we move one node a pixel and we do not put it in the tree.
+ if (parentBranch.children[region].children.data.x == node.x &&
+ parentBranch.children[region].children.data.y == node.y) {
+ node.x += Math.random();
+ node.y += Math.random();
+ }
+ else {
+ this._splitBranch(parentBranch.children[region]);
+ this._placeInTree(parentBranch.children[region],node);
+ }
+ break;
+ case 4: // place in branch
+ this._placeInTree(parentBranch.children[region],node);
+ break;
+ }
+ };
- /**
- * Draw an arrow point (no line)
- */
- CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
- // tail
- var xt = x - length * Math.cos(angle);
- var yt = y - length * Math.sin(angle);
+ /**
+ * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+ * after the split is complete.
+ *
+ * @param parentBranch
+ * @private
+ */
+ exports._splitBranch = function(parentBranch) {
+ // if the branch is shaded with a node, replace the node in the new subset.
+ var containedNode = null;
+ if (parentBranch.childrenCount == 1) {
+ containedNode = parentBranch.children.data;
+ parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
+ }
+ parentBranch.childrenCount = 4;
+ parentBranch.children.data = null;
+ this._insertRegion(parentBranch,"NW");
+ this._insertRegion(parentBranch,"NE");
+ this._insertRegion(parentBranch,"SW");
+ this._insertRegion(parentBranch,"SE");
- // inner tail
- // TODO: allow to customize different shapes
- var xi = x - length * 0.9 * Math.cos(angle);
- var yi = y - length * 0.9 * Math.sin(angle);
+ if (containedNode != null) {
+ this._placeInTree(parentBranch,containedNode);
+ }
+ };
- // left
- var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
- var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
- // right
- var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
- var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+ /**
+ * This function subdivides the region into four new segments.
+ * Specifically, this inserts a single new segment.
+ * It fills the children section of the parentBranch
+ *
+ * @param parentBranch
+ * @param region
+ * @param parentRange
+ * @private
+ */
+ exports._insertRegion = function(parentBranch, region) {
+ var minX,maxX,minY,maxY;
+ var childSize = 0.5 * parentBranch.size;
+ switch (region) {
+ case "NW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "NE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "SW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
+ case "SE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
+ }
- this.beginPath();
- this.moveTo(x, y);
- this.lineTo(xl, yl);
- this.lineTo(xi, yi);
- this.lineTo(xr, yr);
- this.closePath();
- };
- /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
- CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
- if (!dashArray) dashArray=[10,5];
- if (dashLength==0) dashLength = 0.001; // Hack for Safari
- var dashCount = dashArray.length;
- this.moveTo(x, y);
- var dx = (x2-x), dy = (y2-y);
- var slope = dy/dx;
- var distRemaining = Math.sqrt( dx*dx + dy*dy );
- var dashIndex=0, draw=true;
- while (distRemaining>=0.1){
- var dashLength = dashArray[dashIndex++%dashCount];
- if (dashLength > distRemaining) dashLength = distRemaining;
- var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
- if (dx<0) xStep = -xStep;
- x += xStep;
- y += slope*xStep;
- this[draw ? 'lineTo' : 'moveTo'](x,y);
- distRemaining -= dashLength;
- draw = !draw;
- }
+ parentBranch.children[region] = {
+ centerOfMass:{x:0,y:0},
+ mass:0,
+ range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
+ size: 0.5 * parentBranch.size,
+ calcSize: 2 * parentBranch.calcSize,
+ children: {data:null},
+ maxWidth: 0,
+ level: parentBranch.level+1,
+ childrenCount: 0
};
+ };
- // TODO: add diamond shape
- }
+
+ /**
+ * This function is for debugging purposed, it draws the tree.
+ *
+ * @param ctx
+ * @param color
+ * @private
+ */
+ exports._drawTree = function(ctx,color) {
+ if (this.barnesHutTree !== undefined) {
+
+ ctx.lineWidth = 1;
+
+ this._drawBranch(this.barnesHutTree.root,ctx,color);
+ }
+ };
+
+
+ /**
+ * This function is for debugging purposes. It draws the branches recursively.
+ *
+ * @param branch
+ * @param ctx
+ * @param color
+ * @private
+ */
+ exports._drawBranch = function(branch,ctx,color) {
+ if (color === undefined) {
+ color = "#FF0000";
+ }
+
+ if (branch.childrenCount == 4) {
+ this._drawBranch(branch.children.NW,ctx);
+ this._drawBranch(branch.children.NE,ctx);
+ this._drawBranch(branch.children.SE,ctx);
+ this._drawBranch(branch.children.SW,ctx);
+ }
+ ctx.strokeStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX,branch.range.minY);
+ ctx.lineTo(branch.range.maxX,branch.range.minY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX,branch.range.minY);
+ ctx.lineTo(branch.range.maxX,branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX,branch.range.maxY);
+ ctx.lineTo(branch.range.minX,branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX,branch.range.maxY);
+ ctx.lineTo(branch.range.minX,branch.range.minY);
+ ctx.stroke();
+
+ /*
+ if (branch.mass > 0) {
+ ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+ ctx.stroke();
+ }
+ */
+ };
/***/ }
diff --git a/docs/network.html b/docs/network.html
index 10f9f588..56a70c54 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -790,6 +790,14 @@ var options = {
before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased.
+
+
+ | zoomExtentOnStabilize |
+ Boolean |
+ true |
+ When the internal stabilize function is called because the stabilize option is set to true OR the hierarchical system (re)initializes, a call to zoomExtent is done by default. By setting this to false, you can avoid this call. |
+
+
| width |
String |
diff --git a/examples/network/17_network_info.html b/examples/network/17_network_info.html
index 1619d4e3..017bcd76 100644
--- a/examples/network/17_network_info.html
+++ b/examples/network/17_network_info.html
@@ -4,16 +4,17 @@
Network | Images
diff --git a/lib/network/Network.js b/lib/network/Network.js
index c22afaec..e338578e 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -191,6 +191,7 @@ function Network (container, data, options) {
minVelocity: 0.1, // px/s
stabilize: true, // stabilize before displaying the network
stabilizationIterations: 1000, // maximum number of iteration to stabilize
+ zoomExtentOnStabilize: true,
locale: 'en',
locales: locales,
tooltip: {
@@ -1993,7 +1994,11 @@ Network.prototype._stabilize = function() {
this._physicsTick();
count++;
}
- this.zoomExtent(undefined,false,true);
+
+ if (this.constants.zoomExtentOnStabilize == true) {
+ this.zoomExtent(undefined, false, true);
+ }
+
if (this.constants.freezeForStabilization == true) {
this._restoreFrozenNodes();
}