Browse Source

wip improved layout for hierarchical

fixDataView
Alex de Mulder 9 years ago
parent
commit
f57288e35e
3 changed files with 90 additions and 9 deletions
  1. +44
    -3
      dist/vis.js
  2. +43
    -3
      lib/network/modules/LayoutEngine.js
  3. +3
    -3
      test/networkTest.html

+ 44
- 3
dist/vis.js View File

@ -39338,6 +39338,8 @@ return /******/ (function(modules) { // webpackBootstrap
util.extend(this.options, this.defaultOptions);
this.hierarchicalLevels = {};
this.hierarchicalParents = {};
this.hierarchicalChildren = {};
this.bindEventListeners();
}
@ -39647,11 +39649,26 @@ return /******/ (function(modules) { // webpackBootstrap
// add offset to distribution
this._addOffsetsToDistribution(distribution);
this._addChildNodeWidths(distribution);
// place the nodes on the canvas.
this._placeNodesByHierarchy(distribution);
}
}
}
}, {
key: '_addChildNodeWidths',
value: function _addChildNodeWidths(distribution) {
var levels = Object.keys(distribution);
for (var i = levels.length - 1; i > levels[0]; i--) {
for (var node in distribution[levels[i]].nodes) {
if (this.hierarchicalChildren[node] !== undefined) {
var _parent = this.hierarchicalChildren[node].parents[0];
this.hierarchicalParents[_parent].amount += 1;
}
}
}
}
/**
* center align the nodes in the hierarchy for quicker display.
@ -39883,23 +39900,47 @@ return /******/ (function(modules) { // webpackBootstrap
*/
}, {
key: '_setLevelDirected',
value: function _setLevelDirected(level, node) {
value: function _setLevelDirected(level, node, parentId) {
if (this.hierarchicalLevels[node.id] !== undefined) return;
// set the references.
if (parentId !== undefined) {
this._updateReferences(parentId, node.id);
}
var childNode = undefined;
this.hierarchicalLevels[node.id] = level;
for (var i = 0; i < node.edges.length; i++) {
if (node.edges[i].toId === node.id) {
childNode = node.edges[i].from;
this._setLevelDirected(level - 1, childNode);
this._setLevelDirected(level - 1, childNode, node.id);
} else {
childNode = node.edges[i].to;
this._setLevelDirected(level + 1, childNode);
this._setLevelDirected(level + 1, childNode, node.id);
}
}
}
/**
* Update the bookkeeping of parent and child.
* @param parentNodeId
* @param childNodeId
* @private
*/
}, {
key: '_updateReferences',
value: function _updateReferences(parentNodeId, childNodeId) {
if (this.hierarchicalParents[parentNodeId] === undefined) {
this.hierarchicalParents[parentNodeId] = { children: [], width: 0, amount: 0 };
}
this.hierarchicalParents[parentNodeId].children.push(childNodeId);
if (this.hierarchicalChildren[childNodeId] === undefined) {
this.hierarchicalChildren[childNodeId] = { parents: [], width: 0, amount: 0 };
}
this.hierarchicalChildren[childNodeId].parents.push(parentNodeId);
}
/**
* 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.

+ 43
- 3
lib/network/modules/LayoutEngine.js View File

@ -26,6 +26,8 @@ class LayoutEngine {
util.extend(this.options, this.defaultOptions);
this.hierarchicalLevels = {};
this.hierarchicalParents = {};
this.hierarchicalChildren = {};
this.bindEventListeners();
}
@ -328,6 +330,8 @@ class LayoutEngine {
// add offset to distribution
this._addOffsetsToDistribution(distribution);
this._addChildNodeWidths(distribution);
// place the nodes on the canvas.
this._placeNodesByHierarchy(distribution);
}
@ -335,6 +339,18 @@ class LayoutEngine {
}
_addChildNodeWidths(distribution) {
let levels = Object.keys(distribution);
for (let i = levels.length - 1; i > levels[0]; i--) {
for (let node in distribution[levels[i]].nodes) {
if (this.hierarchicalChildren[node] !== undefined) {
let parent = this.hierarchicalChildren[node].parents[0];
this.hierarchicalParents[parent].amount += 1;
}
}
}
}
/**
* center align the nodes in the hierarchy for quicker display.
* @param distribution
@ -553,26 +569,50 @@ class LayoutEngine {
* @param parentId
* @private
*/
_setLevelDirected(level, node) {
_setLevelDirected(level, node, parentId) {
if (this.hierarchicalLevels[node.id] !== undefined)
return;
// set the references.
if (parentId !== undefined) {
this._updateReferences(parentId, node.id);
}
let childNode;
this.hierarchicalLevels[node.id] = level;
for (let i = 0; i < node.edges.length; i++) {
if (node.edges[i].toId === node.id) {
childNode = node.edges[i].from;
this._setLevelDirected(level - 1, childNode);
this._setLevelDirected(level - 1, childNode, node.id);
}
else {
childNode = node.edges[i].to;
this._setLevelDirected(level + 1, childNode);
this._setLevelDirected(level + 1, childNode, node.id);
}
}
}
/**
* Update the bookkeeping of parent and child.
* @param parentNodeId
* @param childNodeId
* @private
*/
_updateReferences(parentNodeId, childNodeId) {
if (this.hierarchicalParents[parentNodeId] === undefined) {
this.hierarchicalParents[parentNodeId] = {children:[], width:0, amount:0};
}
this.hierarchicalParents[parentNodeId].children.push(childNodeId);
if (this.hierarchicalChildren[childNodeId] === undefined) {
this.hierarchicalChildren[childNodeId] = {parents:[], width:0, amount:0};
}
this.hierarchicalChildren[childNodeId].parents.push(parentNodeId);
}
/**
* This is a recursively called function to enumerate the branches from the largest hubs and place the nodes

+ 3
- 3
test/networkTest.html
File diff suppressed because it is too large
View File


Loading…
Cancel
Save