- network info
+ random clustering
image.image.
+
+
+ image.+ The graph can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user. + If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method + is shown in example 23 and the user-defined method is shown in example 24. +
+ +
+// simple use of the hierarchical layout
+var options: {
+ hierarchicalLayout: true
+}
+
+// advanced configuration for keyboard controls
+var options: {
+ hierarchicalLayout: {
+ enabled:false,
+ levelSeparation: 150,
+ nodeSpacing: 100
+ }
+}
+
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| enabled | +Boolean | +false | +Enable or disable the hierarchical layout. + | +
| levelSeparation | +Number | +150 | +This defines the space between levels (in the Y-direction). | +
| nodeSpacing | +Number | +100 | +This defines the space between nodes in the same level (in the X-direction). | +
Graph supports the following methods. diff --git a/examples/graph/17_network_info.html b/examples/graph/17_network_info.html index ca97d75a..0b7e033f 100644 --- a/examples/graph/17_network_info.html +++ b/examples/graph/17_network_info.html @@ -96,11 +96,11 @@ var x = - mygraph.clientWidth / 2 + 50; var y = - mygraph.clientHeight / 2 + 50; var step = 70; - nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed:true}); - nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed:true}); - nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed:true}); - nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed:true}); - nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed:true}); + nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1}); + nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1}); + nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1}); + nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1}); + nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1}); // create a graph var container = document.getElementById('mygraph'); diff --git a/examples/graph/19_scale_free_graph_clustering.html b/examples/graph/19_scale_free_graph_clustering.html index 640e2207..ef3de8cd 100644 --- a/examples/graph/19_scale_free_graph_clustering.html +++ b/examples/graph/19_scale_free_graph_clustering.html @@ -107,7 +107,7 @@
- 
- 
- 
+ 
+ 
+ 
diff --git a/src/graph/Graph.js b/src/graph/Graph.js
index cf2234fb..e517e99f 100644
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@@ -44,6 +44,7 @@ function Graph (container, data, options) {
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
+ level: -1,
color: {
border: '#2B7CE9',
background: '#97C2FC',
@@ -77,18 +78,26 @@ function Graph (container, data, options) {
enabled: true,
theta: 1 / 0.6, // inverted to save time during calculation
gravitationalConstant: -2000,
- centralGravity: 0.1,
+ centralGravity: 0.3,
springLength: 100,
springConstant: 0.05,
damping: 0.09
},
repulsion: {
centralGravity: 0.1,
- springLength: 50,
+ springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
+ hierarchicalRepulsion: {
+ enabled: false,
+ centralGravity: 0.0,
+ springLength: 100,
+ springConstant: 0.01,
+ nodeDistance: 60,
+ damping: 0.09
+ },
damping: null,
centralGravity: null,
springLength: null,
@@ -127,6 +136,11 @@ function Graph (container, data, options) {
enabled: false,
initiallyVisible: false
},
+ hierarchicalLayout: {
+ enabled:false,
+ levelSeparation: 150,
+ nodeSpacing: 100
+ },
smoothCurves: true,
maxVelocity: 10,
minVelocity: 0.1, // px/s
@@ -142,7 +156,6 @@ function Graph (container, data, options) {
graph._redraw();
});
-
// keyboard navigation variables
this.xIncrement = 0;
this.yIncrement = 0;
@@ -159,6 +172,9 @@ function Graph (container, data, options) {
this._loadClusterSystem();
// load the selection system. (mandatory, required by Graph)
this._loadSelectionSystem();
+ // load the selection system. (mandatory, required by Graph)
+ this._loadHierarchySystem();
+
// apply options
this.setOptions(options);
@@ -220,10 +236,17 @@ function Graph (container, data, options) {
this.timer = undefined; // Scheduling function. Is definded in this.start();
// load data (the disable start variable will be the same as the enabled clustering)
- this.setData(data,this.constants.clustering.enabled);
+ this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
+
+ // hierarchical layout
+ if (this.constants.hierarchicalLayout.enabled == true) {
+ this._setupHierarchicalLayout();
+ }
+ else {
+ // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
+ this.zoomToFit(true,this.constants.clustering.enabled);
+ }
- // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
- this.zoomToFit(true,this.constants.clustering.enabled);
// if clustering is disabled, the simulation will have started in the setData function
if (this.constants.clustering.enabled) {
@@ -231,6 +254,9 @@ function Graph (container, data, options) {
}
}
+
+
+
/**
* Get the script path where the vis.js library is located
*
@@ -261,12 +287,14 @@ Graph.prototype._getScriptPath = function() {
*/
Graph.prototype._getRange = function() {
var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
- for (var i = 0; i < this.nodeIndices.length; i++) {
- node = this.nodes[this.nodeIndices[i]];
- if (minX > (node.x - node.width)) {minX = node.x - node.width;}
- if (maxX < (node.x + node.width)) {maxX = node.x + node.width;}
- if (minY > (node.y - node.height)) {minY = node.y - node.height;}
- if (maxY < (node.y + node.height)) {maxY = node.y + node.height;}
+ for (var nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (minX > (node.x - node.width)) {minX = node.x - node.width;}
+ if (maxX < (node.x + node.width)) {maxX = node.x + node.width;}
+ if (minY > (node.y - node.height)) {minY = node.y - node.height;}
+ if (maxY < (node.y + node.height)) {maxY = node.y + node.height;}
+ }
}
return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
};
@@ -310,11 +338,11 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
initialZoom = false;
}
- var numberOfNodes = this.nodeIndices.length;
var range = this._getRange();
var zoomLevel;
if (initialZoom == true) {
+ var numberOfNodes = this.nodeIndices.length;
if (this.constants.smoothCurves == true) {
if (this.constants.clustering.enabled == true &&
numberOfNodes >= this.constants.clustering.initialMaxNodes) {
@@ -352,6 +380,7 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
this._setScale(zoomLevel);
this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
+ this.moving = true;
this.start();
}
};
@@ -469,6 +498,18 @@ Graph.prototype.setOptions = function (options) {
}
}
+ if (options.hierarchicalLayout) {
+ this.constants.hierarchicalLayout.enabled = true;
+ for (prop in options.hierarchicalLayout) {
+ if (options.hierarchicalLayout.hasOwnProperty(prop)) {
+ this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
+ }
+ }
+ }
+ else if (options.hierarchicalLayout !== undefined) {
+ this.constants.hierarchicalLayout.enabled = false;
+ }
+
if (options.clustering) {
this.constants.clustering.enabled = true;
for (prop in options.clustering) {
@@ -719,7 +760,6 @@ Graph.prototype._createKeyBinds = function() {
this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
}
-// this.mousetrap.bind("b",this._toggleBarnesHut.bind(me));
if (this.constants.dataManipulation.enabled == true) {
this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
@@ -1725,7 +1765,7 @@ Graph.prototype._isMoving = function(vmin) {
* @private
*/
Graph.prototype._discreteStepNodes = function() {
- var interval = 0.5;
+ var interval = 0.65;
var nodes = this.nodes;
var nodeId;
@@ -1776,7 +1816,6 @@ Graph.prototype._physicsTick = function() {
Graph.prototype._animationStep = function() {
// reset the timer so a new scheduled animation step can be set
this.timer = undefined;
-
// handle the keyboad movement
this._handleNavigation();
@@ -1854,7 +1893,11 @@ Graph.prototype.toggleFreeze = function() {
-Graph.prototype._configureSmoothCurves = function() {
+Graph.prototype._configureSmoothCurves = function(disableStart) {
+ if (disableStart === undefined) {
+ disableStart = true;
+ }
+
if (this.constants.smoothCurves == true) {
this._createBezierNodes();
}
@@ -1869,8 +1912,10 @@ Graph.prototype._configureSmoothCurves = function() {
}
}
this._updateCalculationNodes();
- this.moving = true;
- this.start();
+ if (!disableStart) {
+ this.moving = true;
+ this.start();
+ }
};
Graph.prototype._createBezierNodes = function() {
diff --git a/src/graph/Node.js b/src/graph/Node.js
index c6700d1a..f955b2e2 100644
--- a/src/graph/Node.js
+++ b/src/graph/Node.js
@@ -53,6 +53,7 @@ function Node(properties, imagelist, grouplist, constants) {
this.radiusFixed = false;
this.radiusMin = constants.nodes.radiusMin;
this.radiusMax = constants.nodes.radiusMax;
+ this.level = -1;
this.imagelist = imagelist;
this.grouplist = grouplist;
@@ -144,6 +145,7 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.x !== undefined) {this.x = properties.x;}
if (properties.y !== undefined) {this.y = properties.y;}
if (properties.value !== undefined) {this.value = properties.value;}
+ if (properties.level !== undefined) {this.level = properties.level;}
// physics
@@ -189,8 +191,8 @@ Node.prototype.setProperties = function(properties, constants) {
}
}
- this.xFixed = this.xFixed || (properties.x !== undefined && properties.fixed);
- this.yFixed = this.yFixed || (properties.y !== undefined && properties.fixed);
+ this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMove);
+ this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMove);
this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
if (this.shape == 'image') {
diff --git a/src/graph/graphMixins/ClusterMixin.js b/src/graph/graphMixins/ClusterMixin.js
index e0de527a..e20fa85c 100644
--- a/src/graph/graphMixins/ClusterMixin.js
+++ b/src/graph/graphMixins/ClusterMixin.js
@@ -966,11 +966,11 @@ var ClusterMixin = {
}
}
- /* Debug Override */
+// /* Debug Override */
// for (nodeId in this.nodes) {
// if (this.nodes.hasOwnProperty(nodeId)) {
// node = this.nodes[nodeId];
-// node.label = String(node.fx).concat(",",node.fy);
+// node.label = String(node.level);
// }
// }
diff --git a/src/graph/graphMixins/HierarchicalLayoutMixin.js b/src/graph/graphMixins/HierarchicalLayoutMixin.js
new file mode 100644
index 00000000..5c1497c4
--- /dev/null
+++ b/src/graph/graphMixins/HierarchicalLayoutMixin.js
@@ -0,0 +1,263 @@
+var HierarchicalLayoutMixin = {
+
+
+ /**
+ * This is the main function to layout the nodes in a hierarchical way.
+ * It checks if the node details are supplied correctly
+ *
+ * @private
+ */
+ _setupHierarchicalLayout : function() {
+ if (this.constants.hierarchicalLayout.enabled == true) {
+
+ // get the size of the largest hubs and check if the user has defined a level for a node.
+ var hubsize = 0;
+ var node, nodeId;
+ var definedLevel = false;
+ var undefinedLevel = false;
+
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.level != -1) {
+ definedLevel = true;
+ }
+ else {
+ undefinedLevel = true;
+ }
+ if (hubsize < node.edges.length) {
+ hubsize = node.edges.length;
+ }
+ }
+ }
+
+ // if the user defined some levels but not all, alert and run without hierarchical layout
+ if (undefinedLevel == true && definedLevel == true) {
+ alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.")
+ this.zoomToFit(true,this.constants.clustering.enabled);
+ if (!this.constants.clustering.enabled) {
+ this.start();
+ }
+ }
+ else {
+ // setup the system to use hierarchical method.
+ this._changeConstants();
+
+ // define levels if undefined by the users. Based on hubsize
+ if (undefinedLevel == true) {
+ this._determineLevels(hubsize);
+ }
+ // check the distribution of the nodes per level.
+ var distribution = this._getDistribution();
+
+ // place the nodes on the canvas. This also stablilizes the system.
+ this._placeNodesByHierarchy(distribution);
+
+ // start the simulation.
+ this.start();
+ }
+ }
+ },
+
+
+ /**
+ * This function places the nodes on the canvas based on the hierarchial distribution.
+ *
+ * @param {Object} distribution | obtained by the function this._getDistribution()
+ * @private
+ */
+ _placeNodesByHierarchy : function(distribution) {
+ var nodeId, node;
+
+ // start placing all the level 0 nodes first. Then recursively position their branches.
+ for (nodeId in distribution[0].nodes) {
+ if (distribution[0].nodes.hasOwnProperty(nodeId)) {
+ node = distribution[0].nodes[nodeId];
+ if (node.xFixed) {
+ node.x = distribution[0].minPos;
+ distribution[0].minPos += distribution[0].nodeSpacing;
+ node.xFixed = false;
+ }
+ this._placeBranchNodes(node.edges,node.id,distribution,node.level);
+ }
+ }
+
+ // give the nodes a defined width so the zoomToFit can be used. This size is arbitrary.
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ node.width = 100;
+ node.height = 100;
+ }
+ }
+
+ // stabilize the system after positioning. This function calls zoomToFit.
+ this._doStabilize();
+
+ // reset the arbitrary width and height we gave the nodes.
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ this.nodes[nodeId]._reset();
+ }
+ }
+ },
+
+
+ /**
+ * This function get the distribution of levels based on hubsize
+ *
+ * @returns {Object}
+ * @private
+ */
+ _getDistribution : function() {
+ var distribution = {};
+ var nodeId, node;
+
+ // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
+ // the fix of X is removed after the x value has been set.
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ node.xFixed = true;
+ node.yFixed = true;
+ node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
+ if (!distribution.hasOwnProperty(node.level)) {
+ distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
+ }
+ distribution[node.level].amount += 1;
+ distribution[node.level].nodes[node.id] = node;
+ }
+ }
+
+ // determine the largest amount of nodes of all levels
+ var maxCount = 0;
+ for (var level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ if (maxCount < distribution[level].amount) {
+ maxCount = distribution[level].amount;
+ }
+ }
+ }
+
+ // set the initial position and spacing of each nodes accordingly
+ for (var level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
+ distribution[level].nodeSpacing /= (distribution[level].amount + 1);
+ distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
+ }
+ }
+
+ return distribution;
+ },
+
+
+ /**
+ * this function allocates nodes in levels based on the recursive branching from the largest hubs.
+ *
+ * @param hubsize
+ * @private
+ */
+ _determineLevels : function(hubsize) {
+ var nodeId, node;
+
+ // determine hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.edges.length == hubsize) {
+ node.level = 0;
+ }
+ }
+ }
+
+ // branch from hubs
+ for (nodeId in this.nodes) {
+ if (this.nodes.hasOwnProperty(nodeId)) {
+ node = this.nodes[nodeId];
+ if (node.level == 0) {
+ this._setLevel(1,node.edges,node.id);
+ }
+ }
+ }
+ },
+
+
+ /**
+ * Since hierarchical layout does not support:
+ * - smooth curves (based on the physics),
+ * - clustering (based on dynamic node counts)
+ *
+ * We disable both features so there will be no problems.
+ *
+ * @private
+ */
+ _changeConstants : function() {
+ this.constants.clustering.enabled = false;
+ this.constants.physics.barnesHut.enabled = false;
+ this.constants.physics.hierarchicalRepulsion.enabled = true;
+ this._loadSelectedForceSolver();
+ this.constants.smoothCurves = false;
+ this._configureSmoothCurves();
+ },
+
+
+ /**
+ * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
+ * on a X position that ensures there will be no overlap.
+ *
+ * @param edges
+ * @param parentId
+ * @param distribution
+ * @param parentLevel
+ * @private
+ */
+ _placeBranchNodes : function(edges, parentId, distribution, parentLevel) {
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ if (edges[i].toId == parentId) {
+ childNode = edges[i].from;
+ }
+ else {
+ childNode = edges[i].to;
+ }
+
+ // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
+ if (childNode.xFixed && childNode.level > parentLevel) {
+ childNode.xFixed = false;
+ childNode.x = distribution[childNode.level].minPos;
+ distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
+ if (childNode.edges.length > 1) {
+ this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
+ }
+ }
+ }
+ },
+
+
+ /**
+ * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
+ *
+ * @param level
+ * @param edges
+ * @param parentId
+ * @private
+ */
+ _setLevel : function(level, edges, parentId) {
+ for (var i = 0; i < edges.length; i++) {
+ var childNode = null;
+ if (edges[i].toId == parentId) {
+ childNode = edges[i].from;
+ }
+ else {
+ childNode = edges[i].to;
+ }
+ if (childNode.level == -1 || childNode.level > level) {
+ childNode.level = level;
+ if (edges.length > 1) {
+ this._setLevel(level+1, childNode.edges, childNode.id);
+ }
+ }
+ }
+ }
+};
\ No newline at end of file
diff --git a/src/graph/graphMixins/ManipulationMixin.js b/src/graph/graphMixins/ManipulationMixin.js
index d1dfc0c1..cc3ca3f8 100644
--- a/src/graph/graphMixins/ManipulationMixin.js
+++ b/src/graph/graphMixins/ManipulationMixin.js
@@ -288,7 +288,7 @@ var manipulationMixin = {
_addNode : function() {
if (this._selectionIsEmpty() && this.editMode == true) {
var positionObject = this._pointerToPositionObject(this.pointerPosition);
- var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",fixed:false};
+ var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMove:true};
if (this.triggerFunctions.add) {
if (this.triggerFunctions.add.length == 2) {
var me = this;
diff --git a/src/graph/graphMixins/MixinLoader.js b/src/graph/graphMixins/MixinLoader.js
index f025b08a..e31dd846 100644
--- a/src/graph/graphMixins/MixinLoader.js
+++ b/src/graph/graphMixins/MixinLoader.js
@@ -55,24 +55,35 @@ var graphMixinLoaders = {
// this overloads the this._calculateNodeForces
if (this.constants.physics.barnesHut.enabled == true) {
this._clearMixin(repulsionMixin);
+ this._clearMixin(hierarchalRepulsionMixin);
this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
this.constants.physics.damping = this.constants.physics.barnesHut.damping;
- this.constants.physics.springGrowthPerMass = this.constants.physics.barnesHut.springGrowthPerMass;
this._loadMixin(barnesHutMixin);
}
+ else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
+ this._clearMixin(barnesHutMixin);
+ this._clearMixin(repulsionMixin);
+
+ this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
+ this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
+ this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
+ this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
+
+ this._loadMixin(hierarchalRepulsionMixin);
+ }
else {
this._clearMixin(barnesHutMixin);
+ this._clearMixin(hierarchalRepulsionMixin);
this.barnesHutTree = undefined;
this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
this.constants.physics.damping = this.constants.physics.repulsion.damping;
- this.constants.physics.springGrowthPerMass = this.constants.physics.repulsion.springGrowthPerMass;
this._loadMixin(repulsionMixin);
}
@@ -214,6 +225,16 @@ var graphMixinLoaders = {
if (this.constants.navigation.enabled == true) {
this._loadNavigationElements();
}
- }
+ },
+
+
+ /**
+ * Mixin the hierarchical layout system.
+ *
+ * @private
+ */
+ _loadHierarchySystem : function() {
+ this._loadMixin(HierarchicalLayoutMixin);
+ }
}
diff --git a/src/graph/graphMixins/physics/BarnesHut.js b/src/graph/graphMixins/physics/BarnesHut.js
index 9e658c8c..5a06e26d 100644
--- a/src/graph/graphMixins/physics/BarnesHut.js
+++ b/src/graph/graphMixins/physics/BarnesHut.js
@@ -56,7 +56,7 @@ var barnesHutMixin = {
if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
// duplicate code to reduce function calls to speed up program
if (distance == 0) {
- distance = 0.5*Math.random();
+ distance = 0.1*Math.random();
dx = distance;
}
var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
diff --git a/src/graph/graphMixins/physics/HierarchialRepulsion.js b/src/graph/graphMixins/physics/HierarchialRepulsion.js
new file mode 100644
index 00000000..bc6b55c8
--- /dev/null
+++ b/src/graph/graphMixins/physics/HierarchialRepulsion.js
@@ -0,0 +1,64 @@
+/**
+ * Created by Alex on 2/10/14.
+ */
+
+var hierarchalRepulsionMixin = {
+
+
+ /**
+ * Calculate the forces the nodes apply on eachother based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ _calculateNodeForces : function() {
+ var dx, dy, distance, fx, fy, combinedClusterSize,
+ repulsingForce, node1, node2, i, j;
+
+ var nodes = this.calculationNodes;
+ var nodeIndices = this.calculationNodeIndices;
+
+ // approximation constants
+ var b = 5;
+ var a_base = 0.5*-b;
+
+
+ // 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]];
+
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ var a = a_base / minimumDistance;
+ if (distance < 2*minimumDistance) {
+ repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
+
+ // 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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/graph/graphMixins/physics/PhysicsMixin.js b/src/graph/graphMixins/physics/PhysicsMixin.js
index c5513761..ad24599c 100644
--- a/src/graph/graphMixins/physics/PhysicsMixin.js
+++ b/src/graph/graphMixins/physics/PhysicsMixin.js
@@ -122,7 +122,7 @@ var physicsMixin = {
node = nodes[this.calculationNodeIndices[i]];
node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
// gravity does not apply when we are in a pocket sector
- if (this._sector() == "default") {
+ if (this._sector() == "default" && gravity != 0) {
dx = -node.x;
dy = -node.y;
distance = Math.sqrt(dx*dx + dy*dy);
@@ -164,6 +164,10 @@ var physicsMixin = {
dy = (edge.from.y - edge.to.y);
length = Math.sqrt(dx * dx + dy * dy);
+ if (length == 0) {
+ length = 0.01;
+ }
+
springForce = this.constants.physics.springConstant * (edgeLength - length) / length;
fx = dx * springForce;