Browse Source

started implementation new hierarchical layout algorithm

v3_develop
Alex de Mulder 10 years ago
parent
commit
88669ae03b
4 changed files with 32 additions and 52 deletions
  1. +13
    -26
      dist/vis.js
  2. +7
    -2
      examples/network/32_hierarchicaLayoutMethods.html
  3. +1
    -1
      lib/network/Network.js
  4. +11
    -23
      lib/network/mixins/HierarchicalLayoutMixin.js

+ 13
- 26
dist/vis.js View File

@ -14018,8 +14018,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.redraw(); this.redraw();
} }
else { else {
console.log('WARNING: infinite loop in redraw?')
throw new Error("bla")
console.log('WARNING: infinite loop in redraw?');
} }
this.redrawCount = 0; this.redrawCount = 0;
} }
@ -22874,7 +22873,7 @@ return /******/ (function(modules) { // webpackBootstrap
levelSeparation: 150, levelSeparation: 150,
nodeSpacing: 100, nodeSpacing: 100,
direction: "UD", // UD, DU, LR, RL direction: "UD", // UD, DU, LR, RL
layout: "hubsize" // hubsize, directed
layout: "hubsize" // hubsize, directed, uniqueDirected
}, },
freezeForStabilization: false, freezeForStabilization: false,
smoothCurves: { smoothCurves: {
@ -34070,36 +34069,24 @@ return /******/ (function(modules) { // webpackBootstrap
} }
}; };
/** /**
* this function allocates nodes in levels based on the recursive branching from the largest hubs.
* this function allocates nodes in levels based on the direction of the edges
* *
* @param hubsize * @param hubsize
* @private * @private
*/ */
exports._determineLevelsDirected = function() { exports._determineLevelsDirected = function() {
var nodeId, node;
var nodeId, node, firstNode;
var minLevel = 10000;
// set first node to source // set first node to source
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
this.nodes[nodeId].level = 10000;
break;
}
}
firstNode = this.nodes[this.nodeIndices[0]];
firstNode.level = minLevel;
this._setLevelDirected(minLevel,firstNode.edges,firstNode.id);
// branch from hubs
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
if (node.level == 10000) {
this._setLevelDirected(10000,node.edges,node.id);
}
}
}
// branch from hubs
var minLevel = 10000;
// get the minimum level
for (nodeId in this.nodes) { for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
@ -34107,7 +34094,7 @@ return /******/ (function(modules) { // webpackBootstrap
} }
} }
// branch from hubs
// subtract the minimum from the set so we have a range starting from 0
for (nodeId in this.nodes) { for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
@ -34213,7 +34200,7 @@ return /******/ (function(modules) { // webpackBootstrap
/** /**
* this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
* this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
* *
* @param level * @param level
* @param edges * @param edges

+ 7
- 2
examples/network/32_hierarchicaLayoutMethods.html View File

@ -19,7 +19,7 @@
<script type="text/javascript"> <script type="text/javascript">
var network = null; var network = null;
var layoutMethod = "hubsize";
var layoutMethod = "direction";
function destroy() { function destroy() {
if (network !== null) { if (network !== null) {
@ -83,6 +83,10 @@
from: 2, from: 2,
to: 8 to: 8
}); });
edges.push({
from: 10,
to: 2
});
edges.push({ edges.push({
from: 2, from: 2,
to: 9 to: 9
@ -130,8 +134,9 @@
</div> </div>
Layout method: Layout method:
<select id="layout"> <select id="layout">
<option value="hubsize">hubsize</option>
<option value="direction">direction</option> <option value="direction">direction</option>
<option value="hubsize">hubsize</option>
</select><br/> </select><br/>
<br /> <br />

+ 1
- 1
lib/network/Network.js View File

@ -181,7 +181,7 @@ function Network (container, data, options) {
levelSeparation: 150, levelSeparation: 150,
nodeSpacing: 100, nodeSpacing: 100,
direction: "UD", // UD, DU, LR, RL direction: "UD", // UD, DU, LR, RL
layout: "hubsize" // hubsize, directed
layout: "hubsize" // hubsize, directed, uniqueDirected
}, },
freezeForStabilization: false, freezeForStabilization: false,
smoothCurves: { smoothCurves: {

+ 11
- 23
lib/network/mixins/HierarchicalLayoutMixin.js View File

@ -218,36 +218,24 @@ exports._determineLevels = function(hubsize) {
} }
}; };
/** /**
* this function allocates nodes in levels based on the recursive branching from the largest hubs.
* this function allocates nodes in levels based on the direction of the edges
* *
* @param hubsize * @param hubsize
* @private * @private
*/ */
exports._determineLevelsDirected = function() { exports._determineLevelsDirected = function() {
var nodeId, node;
var nodeId, node, firstNode;
var minLevel = 10000;
// set first node to source // set first node to source
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
this.nodes[nodeId].level = 10000;
break;
}
}
// branch from hubs
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
if (node.level == 10000) {
this._setLevelDirected(10000,node.edges,node.id);
}
}
}
firstNode = this.nodes[this.nodeIndices[0]];
firstNode.level = minLevel;
this._setLevelDirected(minLevel,firstNode.edges,firstNode.id);
// branch from hubs
var minLevel = 10000;
// get the minimum level
for (nodeId in this.nodes) { for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
@ -255,7 +243,7 @@ exports._determineLevelsDirected = function() {
} }
} }
// branch from hubs
// subtract the minimum from the set so we have a range starting from 0
for (nodeId in this.nodes) { for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
@ -361,7 +349,7 @@ exports._setLevel = function(level, edges, parentId) {
/** /**
* this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
* this function is called recursively to enumerate the branched of the first node and give each node a level based on edge direction
* *
* @param level * @param level
* @param edges * @param edges

Loading…
Cancel
Save