diff --git a/HISTORY.md b/HISTORY.md
index 67f1fcdc..8601dcc9 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -21,6 +21,7 @@ http://visjs.org
- Fixed #1408: Unclustering without release function respects fixed positions now.
- Fixed #1358: Fixed example for clustering on zoom.
- Fixed #1416: Fixed error in improvedLayout.
+- Improvements on hierarchical layout.
### Timeline
diff --git a/dist/vis.js b/dist/vis.js
index 63d427d1..9bdb0f20 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 4.9.1-SNAPSHOT
- * @date 2015-11-26
+ * @date 2015-11-27
*
* @license
* Copyright (C) 2011-2015 Almende B.V, http://almende.com
@@ -39644,12 +39644,45 @@ return /******/ (function(modules) { // webpackBootstrap
// check the distribution of the nodes per level.
var distribution = this._getDistribution();
+ // add offset to distribution
+ this._addOffsetsToDistribution(distribution);
+
// place the nodes on the canvas.
this._placeNodesByHierarchy(distribution);
}
}
}
+ /**
+ * center align the nodes in the hierarchy for quicker display.
+ * @param distribution
+ * @private
+ */
+ }, {
+ key: '_addOffsetsToDistribution',
+ value: function _addOffsetsToDistribution(distribution) {
+ var maxDistances = 0;
+ // get the maximum amount of distances between nodes over all levels
+ for (var level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ if (maxDistances < distribution[level].amount) {
+ maxDistances = distribution[level].amount;
+ }
+ }
+ }
+ // o---o---o : 3 nodes, 2 disances. hence -1
+ maxDistances -= 1;
+
+ // set the distances for all levels but normalize on the first level (0)
+ var zeroLevelDistance = distribution[0].amount - 1 - maxDistances;
+ for (var level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ var distances = distribution[level].amount - 1 - zeroLevelDistance;
+ distribution[level].distance = (maxDistances - distances) * 0.5 * this.nodeSpacing;
+ }
+ }
+ }
+
/**
* This function places the nodes on the canvas based on the hierarchial distribution.
*
@@ -39674,6 +39707,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (node.x === undefined) {
node.x = distribution[level].distance;
}
+
// since the placeBranchNodes can make this process not exactly sequential, we have to avoid overlap by either spacing from the node, or simply adding distance.
distribution[level].distance = Math.max(distribution[level].distance + this.nodeSpacing, node.x + this.nodeSpacing);
} else {
@@ -39896,13 +39930,13 @@ return /******/ (function(modules) { // webpackBootstrap
if (childNodeLevel > parentLevel) {
if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
if (childNode.x === undefined) {
- childNode.x = Math.max(distribution[childNodeLevel].distance, parentNode.x);
+ childNode.x = Math.max(distribution[childNodeLevel].distance);
}
distribution[childNodeLevel].distance = childNode.x + this.nodeSpacing;
this.positionedNodes[childNode.id] = true;
} else {
if (childNode.y === undefined) {
- childNode.y = Math.max(distribution[childNodeLevel].distance, parentNode.y);
+ childNode.y = Math.max(distribution[childNodeLevel].distance);
}
distribution[childNodeLevel].distance = childNode.y + this.nodeSpacing;
}
diff --git a/lib/network/modules/LayoutEngine.js b/lib/network/modules/LayoutEngine.js
index 12de04fd..236be584 100644
--- a/lib/network/modules/LayoutEngine.js
+++ b/lib/network/modules/LayoutEngine.js
@@ -325,12 +325,44 @@ class LayoutEngine {
// check the distribution of the nodes per level.
let distribution = this._getDistribution();
+ // add offset to distribution
+ this._addOffsetsToDistribution(distribution);
+
// place the nodes on the canvas.
this._placeNodesByHierarchy(distribution);
}
}
}
+
+ /**
+ * center align the nodes in the hierarchy for quicker display.
+ * @param distribution
+ * @private
+ */
+ _addOffsetsToDistribution(distribution) {
+ let maxDistances = 0;
+ // get the maximum amount of distances between nodes over all levels
+ for (let level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ if (maxDistances < distribution[level].amount) {
+ maxDistances = distribution[level].amount;
+ }
+ }
+ }
+ // o---o---o : 3 nodes, 2 disances. hence -1
+ maxDistances -= 1;
+
+ // set the distances for all levels but normalize on the first level (0)
+ var zeroLevelDistance = distribution[0].amount - 1 - maxDistances;
+ for (let level in distribution) {
+ if (distribution.hasOwnProperty(level)) {
+ var distances = distribution[level].amount - 1 - zeroLevelDistance;
+ distribution[level].distance = ((maxDistances - distances) * 0.5) * this.nodeSpacing;
+ }
+ }
+ }
+
/**
* This function places the nodes on the canvas based on the hierarchial distribution.
*
@@ -350,6 +382,7 @@ class LayoutEngine {
if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
if (node.x === undefined) {node.x = distribution[level].distance;}
+
// since the placeBranchNodes can make this process not exactly sequential, we have to avoid overlap by either spacing from the node, or simply adding distance.
distribution[level].distance = Math.max(distribution[level].distance + this.nodeSpacing, node.x + this.nodeSpacing);
}
@@ -570,14 +603,14 @@ class LayoutEngine {
if (childNodeLevel > parentLevel) {
if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
if (childNode.x === undefined) {
- childNode.x = Math.max(distribution[childNodeLevel].distance, parentNode.x);
+ childNode.x = Math.max(distribution[childNodeLevel].distance);
}
distribution[childNodeLevel].distance = childNode.x + this.nodeSpacing;
this.positionedNodes[childNode.id] = true;
}
else {
if (childNode.y === undefined) {
- childNode.y = Math.max(distribution[childNodeLevel].distance, parentNode.y)
+ childNode.y = Math.max(distribution[childNodeLevel].distance)
}
distribution[childNodeLevel].distance = childNode.y + this.nodeSpacing;
}
diff --git a/test/networkTest.html b/test/networkTest.html
index 7ab14016..a35753df 100644
--- a/test/networkTest.html
+++ b/test/networkTest.html
@@ -1,2583 +1,62 @@
-
+
-
-
-
+ body {
+ font: 10pt sans;
+ }
+ #mynetwork {
+ width: 1600px;
+ height: 900px;
+ border: 1px solid lightgray;
+ }
+
+
+
-
-
-
-
-
-