diff --git a/HISTORY.md b/HISTORY.md index c75421ac..d13c55f3 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,7 +2,7 @@ http://visjs.org -## not yet released, version 4.12.1-SNAPSHOT +## not yet released, version 4.13.0-SNAPSHOT ### Network @@ -10,7 +10,8 @@ http://visjs.org - Improved the hierarchical layout algorithm by adding a condensing method to remove whitespace. - Fixed #1556: Network throwing an error when clicking the "Edit" button on the manipulation toolbar. -= Fixed #1334 (again): Network now ignores scroll when interaction:zoomView is false. +- Fixed #1334 (again): Network now ignores scroll when interaction:zoomView is false. +- Added options to customize the hierarchical layout without the use of physics. ### Graph2d diff --git a/dist/vis.css b/dist/vis.css index 247ae3e9..7c6cbe10 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -133,7 +133,7 @@ input.vis-configuration.vis-config-rangeinput{ position:relative; top:-5px; width:60px; - height:13px; + /*height:13px;*/ padding:1px; margin:0; pointer-events:none; diff --git a/dist/vis.js b/dist/vis.js index 833ae536..11bfbc55 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 4.12.1-SNAPSHOT - * @date 2016-01-15 + * @date 2016-01-18 * * @license * Copyright (C) 2011-2016 Almende B.V, http://almende.com @@ -11295,10 +11295,11 @@ return /******/ (function(modules) { // webpackBootstrap // propagate over all elements (until stopped) var elem = _firstTarget; while (elem && !stopped) { - if(elem.hammer){ + var elemHammer = elem.hammer; + if(elemHammer){ var _handlers; - for(var k = 0; k < elem.hammer.length; k++){ - _handlers = elem.hammer[k]._handlers[event.type]; + for(var k = 0; k < elemHammer.length; k++){ + _handlers = elemHammer[k]._handlers[event.type]; if(_handlers) for (var i = 0; i < _handlers.length && !stopped; i++) { _handlers[i](event); } @@ -23181,6 +23182,8 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: '_hide', value: function _hide() { + var _this = this; + var storePrevious = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0]; // store the previous color for next time; @@ -23195,10 +23198,13 @@ return /******/ (function(modules) { // webpackBootstrap this.frame.style.display = 'none'; // call the closing callback, restoring the onclick method. - if (this.closeCallback !== undefined) { - this.closeCallback(); - this.closeCallback = undefined; - } + // this is in a setTimeout because it will trigger the show again before the click is done. + setTimeout(function () { + if (_this.closeCallback !== undefined) { + _this.closeCallback(); + _this.closeCallback = undefined; + } + }, 0); } /** @@ -23482,7 +23488,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: '_bindHammer', value: function _bindHammer() { - var _this = this; + var _this2 = this; this.drag = {}; this.pinch = {}; @@ -23490,19 +23496,19 @@ return /******/ (function(modules) { // webpackBootstrap this.hammer.get('pinch').set({ enable: true }); hammerUtil.onTouch(this.hammer, function (event) { - _this._moveSelector(event); + _this2._moveSelector(event); }); this.hammer.on('tap', function (event) { - _this._moveSelector(event); + _this2._moveSelector(event); }); this.hammer.on('panstart', function (event) { - _this._moveSelector(event); + _this2._moveSelector(event); }); this.hammer.on('panmove', function (event) { - _this._moveSelector(event); + _this2._moveSelector(event); }); this.hammer.on('panend', function (event) { - _this._moveSelector(event); + _this2._moveSelector(event); }); } @@ -27844,7 +27850,6 @@ return /******/ (function(modules) { // webpackBootstrap var _this2 = this; if (options !== undefined) { - var errorFound = _sharedValidator2['default'].validate(options, _optionsJs.allOptions); if (errorFound === true) { console.log('%cErrors have been found in the supplied options object.', _sharedValidator.printStyle); @@ -40048,8 +40053,9 @@ return /******/ (function(modules) { // webpackBootstrap this.initialRandomSeed = Math.round(Math.random() * 1000000); this.randomSeed = this.initialRandomSeed; + this.setPhysics = false; this.options = {}; - this.optionsBackup = {}; + this.optionsBackup = { physics: {} }; this.defaultOptions = { randomSeed: undefined, @@ -40057,6 +40063,10 @@ return /******/ (function(modules) { // webpackBootstrap hierarchical: { enabled: false, levelSeparation: 150, + nodeSpacing: 100, + treeSpacing: 200, + blockShifting: true, + edgeMinimization: true, direction: 'UD', // UD, DU, LR, RL sortMethod: 'hubsize' // hubsize, directed } @@ -40127,17 +40137,19 @@ return /******/ (function(modules) { // webpackBootstrap if (this.options.hierarchical.enabled === true) { // set the physics if (allOptions.physics === undefined || allOptions.physics === true) { - allOptions.physics = { solver: 'hierarchicalRepulsion' }; - this.optionsBackup.physics = { solver: 'barnesHut' }; + allOptions.physics = { + enabled: this.optionsBackup.physics.enabled === undefined ? true : this.optionsBackup.physics.enabled, + solver: 'hierarchicalRepulsion' + }; + this.optionsBackup.physics.enabled = this.optionsBackup.physics.enabled === undefined ? true : this.optionsBackup.physics.enabled; + this.optionsBackup.physics.solver = this.optionsBackup.physics.solver || 'barnesHut'; } else if (typeof allOptions.physics === 'object') { - this.optionsBackup.physics = { solver: 'barnesHut' }; - if (allOptions.physics.solver !== undefined) { - this.optionsBackup.physics = { solver: allOptions.physics.solver }; - } - allOptions.physics['solver'] = 'hierarchicalRepulsion'; + this.optionsBackup.physics.enabled = allOptions.physics.enabled === undefined ? true : allOptions.physics.enabled; + this.optionsBackup.physics.solver = allOptions.physics.solver || 'barnesHut'; + allOptions.physics.solver = 'hierarchicalRepulsion'; } else if (allOptions.physics !== false) { - this.optionsBackup.physics = { solver: 'barnesHut' }; - allOptions.physics['solver'] = 'hierarchicalRepulsion'; + this.optionsBackup.physics.solver = 'barnesHut'; + allOptions.physics = { solver: 'hierarchicalRepulsion' }; } // get the type of static smooth curve in case it is required @@ -40181,6 +40193,7 @@ return /******/ (function(modules) { // webpackBootstrap // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth. this.body.emitter.emit('_forceDisableDynamicCurves', type); } + console.log(JSON.stringify(allOptions), JSON.stringify(this.optionsBackup)); return allOptions; } }, { @@ -40331,6 +40344,7 @@ return /******/ (function(modules) { // webpackBootstrap var node = undefined, nodeId = undefined; var definedLevel = false; + var definedPositions = true; var undefinedLevel = false; this.hierarchicalLevels = {}; this.lastNodeOnLevel = {}; @@ -40339,10 +40353,6 @@ return /******/ (function(modules) { // webpackBootstrap this.hierarchicalTrees = {}; this.treeIndex = -1; - this.whiteSpaceReductionFactor = 0.5; - this.nodeSpacing = 100; - this.treeSpacing = 2 * this.nodeSpacing; - this.distributionOrdering = {}; this.distributionIndex = {}; this.distributionOrderingPresence = {}; @@ -40350,6 +40360,9 @@ return /******/ (function(modules) { // webpackBootstrap for (nodeId in this.body.nodes) { if (this.body.nodes.hasOwnProperty(nodeId)) { node = this.body.nodes[nodeId]; + if (node.options.x === undefined && node.options.y === undefined) { + definedPositions = false; + } if (node.options.level !== undefined) { definedLevel = true; this.hierarchicalLevels[nodeId] = node.options.level; @@ -40385,7 +40398,7 @@ return /******/ (function(modules) { // webpackBootstrap this._placeNodesByHierarchy(distribution); // condense the whitespace. - this._condenseHierarchy(distribution); + this._condenseHierarchy(); // shift to center so gravity does not have to do much this._shiftToCenter(); @@ -40398,17 +40411,20 @@ return /******/ (function(modules) { // webpackBootstrap */ }, { key: '_condenseHierarchy', - value: function _condenseHierarchy(distribution) { + value: function _condenseHierarchy() { var _this2 = this; + // Global var in this scope to define when the movement has stopped. + var stillShifting = false; + var branches = {}; // first we have some methods to help shifting trees around. // the main method to shift the trees var shiftTrees = function shiftTrees() { var treeSizes = getTreeSizes(); for (var i = 0; i < treeSizes.length - 1; i++) { var diff = treeSizes[i].max - treeSizes[i + 1].min; - if (diff !== _this2.treeSpacing) { - shiftTree(i + 1, diff - _this2.treeSpacing); + if (diff !== _this2.options.hierarchical.treeSpacing) { + shiftTree(i + 1, diff - _this2.options.hierarchical.treeSpacing); } } }; @@ -40468,33 +40484,26 @@ return /******/ (function(modules) { // webpackBootstrap var maxLevel = arguments.length <= 1 || arguments[1] === undefined ? 1e9 : arguments[1]; var minSpace = 1e9; - var maxSpace = -1e9; + var maxSpace = 1e9; var min = 1e9; var max = -1e9; for (var branchNode in branchMap) { if (branchMap.hasOwnProperty(branchNode)) { var node = _this2.body.nodes[branchNode]; var level = _this2.hierarchicalLevels[node.id]; - var index = _this2.distributionIndex[node.id]; - var position = _this2._getPositionForHierarchy(_this2.body.nodes[node.id]); - - // if this is the node at the side, there is no previous node - if (index != 0) { - var prevNode = _this2.distributionOrdering[level][index - 1]; - if (branchMap[prevNode.id] === undefined) { - var prevPos = _this2._getPositionForHierarchy(prevNode); - minSpace = Math.min(minSpace, position - prevPos); - } - } + var position = _this2._getPositionForHierarchy(node); - // if this is the node at the end there is no next node - if (index != _this2.distributionOrdering[level].length - 1) { - var nextNode = _this2.distributionOrdering[level][index + 1]; - if (branchMap[nextNode.id] === undefined) { - var nextPos = _this2._getPositionForHierarchy(nextNode); - maxSpace = Math.max(maxSpace, nextPos - position); - } - } + // get the space around the node. + + var _getSpaceAroundNode2 = _this2._getSpaceAroundNode(node, branchMap); + + var _getSpaceAroundNode22 = _slicedToArray(_getSpaceAroundNode2, 2); + + var minSpaceNode = _getSpaceAroundNode22[0]; + var maxSpaceNode = _getSpaceAroundNode22[1]; + + minSpace = Math.min(minSpaceNode, minSpace); + maxSpace = Math.min(maxSpaceNode, maxSpace); // the width is only relevant for the levels two nodes have in common. This is why we filter on this. if (level <= maxLevel) { @@ -40504,9 +40513,6 @@ return /******/ (function(modules) { // webpackBootstrap } } - // if there was no next node, the max space is infinite (1e9 ~ close enough) - maxSpace = maxSpace < 0 ? 1e9 : maxSpace; - return [min, max, minSpace, maxSpace]; }; @@ -40556,10 +40562,10 @@ return /******/ (function(modules) { // webpackBootstrap var level = levels[i]; var levelNodes = _this2.distributionOrdering[level]; if (levelNodes.length > 1) { - for (var _i = 0; _i < levelNodes.length - 1; _i++) { - if (hasSameParent(levelNodes[_i], levelNodes[_i + 1]) === true) { - if (_this2.hierarchicalTrees[levelNodes[_i].id] === _this2.hierarchicalTrees[levelNodes[_i + 1].id]) { - callback(levelNodes[_i], levelNodes[_i + 1], centerParents); + for (var j = 0; j < levelNodes.length - 1; j++) { + if (hasSameParent(levelNodes[j], levelNodes[j + 1]) === true) { + if (_this2.hierarchicalTrees[levelNodes[j].id] === _this2.hierarchicalTrees[levelNodes[j + 1].id]) { + callback(levelNodes[j], levelNodes[j + 1], centerParents); } } } @@ -40567,9 +40573,6 @@ return /******/ (function(modules) { // webpackBootstrap } }; - // Global var in this scope to define when the movement has stopped. - var stillShifting = false; - // callback for shifting branches var branchShiftCallback = function branchShiftCallback(node1, node2) { var centerParent = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2]; @@ -40579,7 +40582,7 @@ return /******/ (function(modules) { // webpackBootstrap var pos2 = _this2._getPositionForHierarchy(node2); var diffAbs = Math.abs(pos2 - pos1); //console.log("NOW CHEcKING:", node1.id, node2.id, diffAbs); - if (diffAbs > _this2.nodeSpacing) { + if (diffAbs > _this2.options.hierarchical.nodeSpacing) { var branchNodes1 = {};branchNodes1[node1.id] = true; var branchNodes2 = {};branchNodes2[node2.id] = true; @@ -40609,11 +40612,11 @@ return /******/ (function(modules) { // webpackBootstrap //console.log(node1.id, getBranchBoundary(branchNodes1, maxLevel), node2.id, getBranchBoundary(branchNodes2, maxLevel), maxLevel); var diffBranch = Math.abs(max1 - min2); - if (diffBranch > _this2.nodeSpacing) { - var offset = max1 - min2 + _this2.nodeSpacing; - if (offset < -minSpace2 + _this2.nodeSpacing) { - offset = -minSpace2 + _this2.nodeSpacing; - //console.log("RESETTING OFFSET", max1 - min2 + this.nodeSpacing, -minSpace2, offset); + if (diffBranch > _this2.options.hierarchical.nodeSpacing) { + var offset = max1 - min2 + _this2.options.hierarchical.nodeSpacing; + if (offset < -minSpace2 + _this2.options.hierarchical.nodeSpacing) { + offset = -minSpace2 + _this2.options.hierarchical.nodeSpacing; + //console.log("RESETTING OFFSET", max1 - min2 + this.options.hierarchical.nodeSpacing, -minSpace2, offset); } if (offset < 0) { //console.log("SHIFTING", node2.id, offset); @@ -40627,43 +40630,169 @@ return /******/ (function(modules) { // webpackBootstrap //this.body.emitter.emit("_redraw");}) }; - // callback for shifting individual nodes - var unitShiftCallback = function unitShiftCallback(node1, node2, centerParent) { + var minimizeEdgeLength = function minimizeEdgeLength(iterations, node) { //window.CALLBACKS.push(() => { - var pos1 = _this2._getPositionForHierarchy(node1); - var pos2 = _this2._getPositionForHierarchy(node2); - var diffAbs = Math.abs(pos2 - pos1); - //console.log("NOW CHEcKING:", node1.id, node2.id, diffAbs); - if (diffAbs > _this2.nodeSpacing) { - var diff = (pos1 + _this2.nodeSpacing - pos2) * _this2.whiteSpaceReductionFactor; - if (diff != 0) { + // console.log("ts",node.id); + var nodeId = node.id; + var allEdges = node.edges; + var nodeLevel = _this2.hierarchicalLevels[node.id]; + + // gather constants + var C2 = _this2.options.hierarchical.levelSeparation * _this2.options.hierarchical.levelSeparation; + var referenceNodes = {}; + var aboveEdges = []; + for (var i = 0; i < allEdges.length; i++) { + var edge = allEdges[i]; + if (edge.toId != edge.fromId) { + var otherNode = edge.toId == nodeId ? edge.from : edge.to; + referenceNodes[allEdges[i].id] = otherNode; + if (_this2.hierarchicalLevels[otherNode.id] < nodeLevel) { + aboveEdges.push(edge); + } + } + } + + // differentiated sum of lengths based on only moving one node over one axis + var getFx = function getFx(point, edges) { + var sum = 0; + for (var i = 0; i < edges.length; i++) { + if (referenceNodes[edges[i].id] !== undefined) { + var a = _this2._getPositionForHierarchy(referenceNodes[edges[i].id]) - point; + sum += a / Math.sqrt(a * a + C2); + } + } + return sum; + }; + + // doubly differentiated sum of lengths based on only moving one node over one axis + var getDFx = function getDFx(point, edges) { + var sum = 0; + for (var i = 0; i < edges.length; i++) { + if (referenceNodes[edges[i].id] !== undefined) { + var a = _this2._getPositionForHierarchy(referenceNodes[edges[i].id]) - point; + sum -= C2 * Math.pow(a * a + C2, -1.5); + } + } + return sum; + }; + + var getGuess = function getGuess(iterations, edges) { + var guess = _this2._getPositionForHierarchy(node); + // Newton's method for optimization + var guessMap = {}; + for (var i = 0; i < iterations; i++) { + var fx = getFx(guess, edges); + var dfx = getDFx(guess, edges); + + // we limit the movement to avoid instability. + var limit = 40; + var ratio = Math.max(-limit, Math.min(limit, Math.round(fx / dfx))); + guess = guess - ratio; + // reduce duplicates + if (guessMap[guess] !== undefined) { + break; + } + guessMap[guess] = i; + } + return guess; + }; + + var moveBranch = function moveBranch(guess) { + // position node if there is space + var nodePosition = _this2._getPositionForHierarchy(node); + + // check movable area of the branch + if (branches[node.id] === undefined) { + var branchNodes = {}; + branchNodes[node.id] = true; + getBranchNodes(node, branchNodes); + branches[node.id] = branchNodes; + } + + var _getBranchBoundary4 = getBranchBoundary(branches[node.id]); + + var _getBranchBoundary42 = _slicedToArray(_getBranchBoundary4, 4); + + var minBranch = _getBranchBoundary42[0]; + var maxBranch = _getBranchBoundary42[1]; + var minSpaceBranch = _getBranchBoundary42[2]; + var maxSpaceBranch = _getBranchBoundary42[3]; + + var diff = guess - nodePosition; + + // check if we are allowed to move the node: + var branchOffset = 0; + if (diff > 0) { + branchOffset = Math.min(diff, maxSpaceBranch - _this2.options.hierarchical.nodeSpacing); + } else if (diff < 0) { + branchOffset = -Math.min(-diff, minSpaceBranch - _this2.options.hierarchical.nodeSpacing); + } + + if (branchOffset != 0) { + //console.log("moving branch:",branchOffset, maxSpaceBranch, minSpaceBranch) + _this2._shiftBlock(node.id, branchOffset); + //this.body.emitter.emit("_redraw"); stillShifting = true; } - var factor = node2.edges.length / (node1.edges.length + node2.edges.length); - _this2._setPositionForHierarchy(node2, pos2 + factor * diff, undefined, true); - _this2._setPositionForHierarchy(node1, pos1 - (1 - factor) * diff, undefined, true); - if (centerParent === true) { - _this2._centerParent(node2); + }; + + var moveNode = function moveNode(guess) { + var nodePosition = _this2._getPositionForHierarchy(node); + + // position node if there is space + + var _getSpaceAroundNode3 = _this2._getSpaceAroundNode(node); + + var _getSpaceAroundNode32 = _slicedToArray(_getSpaceAroundNode3, 2); + + var minSpace = _getSpaceAroundNode32[0]; + var maxSpace = _getSpaceAroundNode32[1]; + + var diff = guess - nodePosition; + // check if we are allowed to move the node: + var newPosition = nodePosition; + if (diff > 0) { + newPosition = Math.min(nodePosition + (maxSpace - _this2.options.hierarchical.nodeSpacing), guess); + } else if (diff < 0) { + newPosition = Math.max(nodePosition - (minSpace - _this2.options.hierarchical.nodeSpacing), guess); + } + + if (newPosition !== nodePosition) { + //console.log("moving Node:",diff, minSpace, maxSpace) + _this2._setPositionForHierarchy(node, newPosition, undefined, true); + //this.body.emitter.emit("_redraw"); + stillShifting = true; } - } - //this.body.emitter.emit("_redraw");}) + }; + + var guess = getGuess(iterations, aboveEdges); + moveBranch(guess); + guess = getGuess(iterations, allEdges); + moveNode(guess); + //}) }; - // method to shift all nodes closer together iteratively - var shiftUnitsCloser = function shiftUnitsCloser(iterations) { + // method to remove whitespace between branches. Because we do bottom up, we can center the parents. + var minimizeEdgeLengthBottomUp = function minimizeEdgeLengthBottomUp(iterations) { var levels = Object.keys(_this2.distributionOrdering); + levels = levels.reverse(); for (var i = 0; i < iterations; i++) { stillShifting = false; - shiftElementsCloser(unitShiftCallback, levels, false); + for (var j = 0; j < levels.length; j++) { + var level = levels[j]; + var levelNodes = _this2.distributionOrdering[level]; + for (var k = 0; k < levelNodes.length; k++) { + minimizeEdgeLength(1000, levelNodes[k]); + } + } if (stillShifting !== true) { - //console.log("FINISHED shiftUnitsCloser IN " + i); + //console.log("FINISHED minimizeEdgeLengthBottomUp IN " + i); break; } } - //console.log("FINISHED shiftUnitsCloser IN " + iterations); }; - // method to remove whitespace between branches. Because we do bottom up, we can center the parents. + //// method to remove whitespace between branches. Because we do bottom up, we can center the parents. var shiftBranchesCloserBottomUp = function shiftBranchesCloserBottomUp(iterations) { var levels = Object.keys(_this2.distributionOrdering); levels = levels.reverse(); @@ -40671,7 +40800,7 @@ return /******/ (function(modules) { // webpackBootstrap stillShifting = false; shiftElementsCloser(branchShiftCallback, levels, true); if (stillShifting !== true) { - //console.log("FINISHED shiftBranchesCloserBottomUp IN " + i); + //console.log("FINISHED shiftBranchesCloserBottomUp IN " + (i+1)); break; } } @@ -40679,18 +40808,64 @@ return /******/ (function(modules) { // webpackBootstrap // center all parents var centerAllParents = function centerAllParents() { - for (var node in _this2.body.nodes) { - _this2._centerParent(_this2.body.nodes[node]); + for (var nodeId in _this2.body.nodes) { + if (_this2.body.nodes.hasOwnProperty(nodeId)) _this2._centerParent(_this2.body.nodes[nodeId]); } }; // the actual work is done here. - shiftBranchesCloserBottomUp(5); - centerAllParents(); - shiftUnitsCloser(2); + if (this.options.hierarchical.blockShifting === true) { + shiftBranchesCloserBottomUp(5); + centerAllParents(); + } + + // minimize edge length + if (this.options.hierarchical.edgeMinimization === true) { + minimizeEdgeLengthBottomUp(20); + } + shiftTrees(); } + /** + * This gives the space around the node. IF a map is supplied, it will only check against nodes NOT in the map. + * This is used to only get the distances to nodes outside of a branch. + * @param node + * @param map + * @returns {*[]} + * @private + */ + }, { + key: '_getSpaceAroundNode', + value: function _getSpaceAroundNode(node, map) { + var useMap = true; + if (map === undefined) { + useMap = false; + } + var level = this.hierarchicalLevels[node.id]; + var index = this.distributionIndex[node.id]; + var position = this._getPositionForHierarchy(node); + var minSpace = 1e9; + var maxSpace = 1e9; + if (index !== 0) { + var prevNode = this.distributionOrdering[level][index - 1]; + if (useMap === true && map[prevNode.id] === undefined || useMap === false) { + var prevPos = this._getPositionForHierarchy(prevNode); + minSpace = position - prevPos; + } + } + + if (index != this.distributionOrdering[level].length - 1) { + var nextNode = this.distributionOrdering[level][index + 1]; + if (useMap === true && map[nextNode.id] === undefined || useMap === false) { + var nextPos = this._getPositionForHierarchy(nextNode); + maxSpace = Math.min(maxSpace, nextPos - position); + } + } + + return [minSpace, maxSpace]; + } + /** * We use this method to center a parent node and check if it does not cross other nodes when it does. * @param node @@ -40710,32 +40885,25 @@ return /******/ (function(modules) { // webpackBootstrap var maxPos = -1e9; var children = this.hierarchicalParents[parentId].children; if (children.length > 0) { - for (var _i2 = 0; _i2 < children.length; _i2++) { - var childNode = this.body.nodes[children[_i2]]; + for (var _i = 0; _i < children.length; _i++) { + var childNode = this.body.nodes[children[_i]]; minPos = Math.min(minPos, this._getPositionForHierarchy(childNode)); maxPos = Math.max(maxPos, this._getPositionForHierarchy(childNode)); } } - var level = this.hierarchicalLevels[parentId]; - var index = this.distributionIndex[parentId]; var position = this._getPositionForHierarchy(parentNode); - var minSpace = 1e9; - var maxSpace = 1e9; - if (index != 0) { - var prevNode = this.distributionOrdering[level][index - 1]; - var prevPos = this._getPositionForHierarchy(prevNode); - minSpace = position - prevPos; - } - if (index != this.distributionOrdering[level].length - 1) { - var nextNode = this.distributionOrdering[level][index + 1]; - var nextPos = this._getPositionForHierarchy(nextNode); - maxSpace = Math.min(maxSpace, nextPos - position); - } + var _getSpaceAroundNode4 = this._getSpaceAroundNode(parentNode); + + var _getSpaceAroundNode42 = _slicedToArray(_getSpaceAroundNode4, 2); + + var minSpace = _getSpaceAroundNode42[0]; + var maxSpace = _getSpaceAroundNode42[1]; var newPosition = 0.5 * (minPos + maxPos); - if (newPosition < position + maxSpace && newPosition > position - minSpace) { + var diff = position - newPosition; + if (diff < 0 && Math.abs(diff) < maxSpace - this.options.hierarchical.nodeSpacing || diff > 0 && Math.abs(diff) < minSpace - this.options.hierarchical.nodeSpacing) { this._setPositionForHierarchy(parentNode, newPosition, undefined, true); } } @@ -40764,7 +40932,7 @@ return /******/ (function(modules) { // webpackBootstrap for (var i = 0; i < nodeArray.length; i++) { var node = nodeArray[i]; if (this.positionedNodes[node.id] === undefined) { - this._setPositionForHierarchy(node, this.nodeSpacing * i, level); + this._setPositionForHierarchy(node, this.options.hierarchical.nodeSpacing * i, level); this.positionedNodes[node.id] = true; this._placeBranchNodes(node.id, level); } @@ -40967,8 +41135,6 @@ return /******/ (function(modules) { // webpackBootstrap /** * Update the bookkeeping of parent and child. - * @param parentNodeId - * @param childNodeId * @private */ }, { @@ -41079,15 +41245,15 @@ return /******/ (function(modules) { // webpackBootstrap if (i === 0) { pos = this._getPositionForHierarchy(this.body.nodes[parentId]); } else { - pos = this._getPositionForHierarchy(childNodes[i - 1]) + this.nodeSpacing; + pos = this._getPositionForHierarchy(childNodes[i - 1]) + this.options.hierarchical.nodeSpacing; } this._setPositionForHierarchy(childNode, pos, childNodeLevel); // if overlap has been detected, we shift the branch if (this.lastNodeOnLevel[childNodeLevel] !== undefined) { var previousPos = this._getPositionForHierarchy(this.body.nodes[this.lastNodeOnLevel[childNodeLevel]]); - if (pos - previousPos < this.nodeSpacing) { - var diff = previousPos + this.nodeSpacing - pos; + if (pos - previousPos < this.options.hierarchical.nodeSpacing) { + var diff = previousPos + this.options.hierarchical.nodeSpacing - pos; var sharedParent = this._findCommonParent(this.lastNodeOnLevel[childNodeLevel], childNode.id); this._shiftBlock(sharedParent.withChild, diff); } @@ -42620,6 +42786,10 @@ return /******/ (function(modules) { // webpackBootstrap hierarchical: { enabled: { boolean: boolean }, levelSeparation: { number: number }, + nodeSpacing: { number: number }, + treeSpacing: { number: number }, + blockShifting: { boolean: boolean }, + edgeMinimization: { boolean: boolean }, direction: { string: ['UD', 'DU', 'LR', 'RL'] }, // UD, DU, LR, RL sortMethod: { string: ['hubsize', 'directed'] }, // hubsize, directed __type__: { object: object, boolean: boolean } @@ -42919,6 +43089,10 @@ return /******/ (function(modules) { // webpackBootstrap hierarchical: { enabled: false, levelSeparation: [150, 20, 500, 5], + nodeSpacing: [100, 20, 500, 5], + treeSpacing: [200, 20, 500, 5], + blockShifting: true, + edgeMinimization: true, direction: ['UD', 'DU', 'LR', 'RL'], // UD, DU, LR, RL sortMethod: ['hubsize', 'directed'] // hubsize, directed } diff --git a/dist/vis.min.css b/dist/vis.min.css index bd6e1abe..ee0f437d 100644 --- a/dist/vis.min.css +++ b/dist/vis.min.css @@ -1 +1 @@ -.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration.vis-config-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{width:120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.vis-configuration.vis-config-colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;width:60px;height:13px;padding:1px;margin:0;pointer-events:none}.vis-panel,.vis-timeline{padding:0;box-sizing:border-box}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380', GradientType=0 );box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0 )}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-width:8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-width:12px;margin-top:-12px}.vis-timeline{position:relative;border:1px solid #bfbfbf;margin:0}.vis-panel{position:absolute;margin:0}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-itemset,.vis-labelset,.vis-labelset .vis-label{position:relative;box-sizing:border-box}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset .vis-label{left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png) center no-repeat;position:absolute;width:24px;height:24px;top:-4px;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-range.vis-item.vis-readonly .vis-drag-left,.vis-range.vis-item.vis-readonly .vis-drag-right{cursor:auto}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}div.vis-network div.vis-close,div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0 );padding-top:4px;position:absolute;left:0;top:0;width:100%;height:28px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:5px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{float:left;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin-left:10px;padding:0 8px;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{float:left;display:inline-block;width:1px;height:21px;background-color:#bdbdbd;margin:0 7px 0 15px}div.vis-network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;font-color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.vis-color-picker{position:absolute;top:0;left:30px;margin-top:-140px;margin-left:30px;width:310px;height:444px;z-index:1;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow::after,div.vis-color-picker div.vis-arrow::before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 )}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{width:140px;height:20px;top:380px;font-size:10px;color:rgba(0,0,0,.4);line-height:20px;position:absolute;vertical-align:middle}div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:159px;text-align:right;padding-right:2px}div.vis-color-picker div.vis-initial-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:10px;text-align:left;padding-left:2px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px} \ No newline at end of file +.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}div.vis-configuration{position:relative;display:block;float:left;font-size:12px}div.vis-configuration-wrapper{display:block;width:700px}div.vis-configuration.vis-config-option-container{display:block;width:495px;background-color:#fff;border:2px solid #f7f8fa;border-radius:4px;margin-top:20px;left:10px;padding-left:5px}div.vis-configuration.vis-config-button{display:block;width:495px;height:25px;vertical-align:middle;line-height:25px;background-color:#f7f8fa;border:2px solid #ceced0;border-radius:4px;margin-top:20px;left:10px;padding-left:5px;cursor:pointer;margin-bottom:30px}div.vis-configuration.vis-config-button.hover{background-color:#4588e6;border:2px solid #214373;color:#fff}div.vis-configuration.vis-config-item{display:block;float:left;width:495px;height:25px;vertical-align:middle;line-height:25px}div.vis-configuration.vis-config-item.vis-config-s2{left:10px;background-color:#f7f8fa;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s3{left:20px;background-color:#e4e9f0;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-item.vis-config-s4{left:30px;background-color:#cfd8e6;padding-left:5px;border-radius:3px}div.vis-configuration.vis-config-header{font-size:18px;font-weight:700}div.vis-configuration.vis-config-label{width:120px;height:25px;line-height:25px}div.vis-configuration.vis-config-label.vis-config-s3{width:110px}div.vis-configuration.vis-config-label.vis-config-s4{width:100px}div.vis-configuration.vis-config-colorBlock{top:1px;width:30px;height:19px;border:1px solid #444;border-radius:2px;padding:0;margin:0;cursor:pointer}input.vis-configuration.vis-config-checkbox{left:-5px}input.vis-configuration.vis-config-rangeinput{position:relative;top:-5px;width:60px;padding:1px;margin:0;pointer-events:none}.vis-panel,.vis-timeline{padding:0;box-sizing:border-box}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:rgba(0,0,0,0);width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #14334b;height:17px;width:17px;border-radius:50%;background:#3876c2;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380', GradientType=0 );box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0 )}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}input.vis-configuration.vis-config-range::-ms-fill-lower{background:#777;border-radius:10px}input.vis-configuration.vis-config-range::-ms-fill-upper{background:#ddd;border-radius:10px}input.vis-configuration.vis-config-range::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:focus::-ms-fill-lower{background:#888}input.vis-configuration.vis-config-range:focus::-ms-fill-upper{background:#ccc}.vis-configuration-popup{position:absolute;background:rgba(57,76,89,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.vis-configuration-popup:after,.vis-configuration-popup:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.vis-configuration-popup:after{border-color:rgba(136,183,213,0);border-left-color:rgba(57,76,89,.85);border-width:8px;margin-top:-8px}.vis-configuration-popup:before{border-color:rgba(194,225,245,0);border-left-color:#f2faff;border-width:12px;margin-top:-12px}.vis-timeline{position:relative;border:1px solid #bfbfbf;margin:0}.vis-panel{position:absolute;margin:0}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-itemset,.vis-labelset,.vis-labelset .vis-label{position:relative;box-sizing:border-box}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset .vis-label{left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png) center no-repeat;position:absolute;width:24px;height:24px;top:-4px;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-range.vis-item.vis-readonly .vis-drag-left,.vis-range.vis-item.vis-readonly .vis-drag-right{cursor:auto}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}div.vis-network div.vis-close,div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0 );padding-top:4px;position:absolute;left:0;top:0;width:100%;height:28px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:5px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{float:left;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin-left:10px;padding:0 8px;user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{float:left;display:inline-block;width:1px;height:21px;background-color:#bdbdbd;margin:0 7px 0 15px}div.vis-network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;font-color:#000;background-color:#f5f4ed;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #808074;box-shadow:3px 3px 10px rgba(0,0,0,.2);pointer-events:none}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.vis-color-picker{position:absolute;top:0;left:30px;margin-top:-140px;margin-left:30px;width:310px;height:444px;z-index:1;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow::after,div.vis-color-picker div.vis-arrow::before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 )}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{width:140px;height:20px;top:380px;font-size:10px;color:rgba(0,0,0,.4);line-height:20px;position:absolute;vertical-align:middle}div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:159px;text-align:right;padding-right:2px}div.vis-color-picker div.vis-initial-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:10px;text-align:left;padding-left:2px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px} \ No newline at end of file diff --git a/docs/network/layout.html b/docs/network/layout.html index c43a838c..08f1eca9 100644 --- a/docs/network/layout.html +++ b/docs/network/layout.html @@ -105,8 +105,12 @@ var options = { hierarchical: { enabled:false, levelSeparation: 150, - direction: 'UD', // UD, DU, LR, RL - sortMethod: 'hubsize' // hubsize, directed + nodeSpacing: 100, + treeSpacing: 200, + blockShifting: true, + edgeMinimization: true, + direction: 'UD', // UD, DU, LR, RL + sortMethod: 'hubsize' // hubsize, directed } } } @@ -132,6 +136,12 @@ network.setOptions(options);
Object
false
150
100
200
true
true
'UD'
UD, DU, LR, RL
. To simplify: up-down, down-up, left-right, right-left.'hubsize'
hubsize, directed
. levelSeparation |
+ Distance between levels. | +
nodeSpacing |
+ Minimum distance between nodes on the free axis. | +
treeSpacing |
+ Distance between different trees (independent networks). | +
blockShifting |
+ Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift + it's branch along with it for as far as it can, respecting the nodeSpacing on any level. | +
edgeMinimization |
+ Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process. + Each node will try to move along its free axis to reduce the total length of it's edges. | +