jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/develop' into develop 

Conflicts:
	dist/vis.js
	dist/vis.min.js
css_transitions
josdejong 10 years ago
parent
07f3c44b38 c0c62bfd67
commit
a94d528e2d
9 changed files with 533 additions and 437 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +67
    -47
      dist/vis.js
  2. +7
    -7
      dist/vis.min.js
  3. +25
    -4
      docs/graph.html
  4. +1
    -1
      examples/graph/20_navigation.html
  5. +332
    -331
      examples/graph/22_les_miserables.html
  6. +36
    -2
      examples/graph/23_hierarchical_layout.html
  7. +21
    -17
      src/graph/Graph.js
  8. +43
    -27
      src/graph/graphMixins/HierarchicalLayoutMixin.js
  9. +1
    -1
      src/graph/graphMixins/NavigationMixin.js

+ 67
- 47
dist/vis.js View File

@ -4,8 +4,8 @@
* *
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 0.5.1
* @date 2014-02-21
* @version @@version
* @date @@date
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -12131,7 +12131,9 @@ var HierarchicalLayoutMixin = {
*/ */
_setupHierarchicalLayout : function() { _setupHierarchicalLayout : function() {
if (this.constants.hierarchicalLayout.enabled == true) { if (this.constants.hierarchicalLayout.enabled == true) {
if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
this.constants.hierarchicalLayout.levelSeparation *= -1;
}
// get the size of the largest hubs and check if the user has defined a level for a node. // get the size of the largest hubs and check if the user has defined a level for a node.
var hubsize = 0; var hubsize = 0;
var node, nodeId; var node, nodeId;
@ -12156,7 +12158,7 @@ var HierarchicalLayoutMixin = {
// if the user defined some levels but not all, alert and run without hierarchical layout // if the user defined some levels but not all, alert and run without hierarchical layout
if (undefinedLevel == true && definedLevel == true) { 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.") 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);
this.zoomExtent(true,this.constants.clustering.enabled);
if (!this.constants.clustering.enabled) { if (!this.constants.clustering.enabled) {
this.start(); this.start();
} }
@ -12195,33 +12197,28 @@ var HierarchicalLayoutMixin = {
for (nodeId in distribution[0].nodes) { for (nodeId in distribution[0].nodes) {
if (distribution[0].nodes.hasOwnProperty(nodeId)) { if (distribution[0].nodes.hasOwnProperty(nodeId)) {
node = distribution[0].nodes[nodeId]; node = distribution[0].nodes[nodeId];
if (node.xFixed) {
node.x = distribution[0].minPos;
distribution[0].minPos += distribution[0].nodeSpacing;
node.xFixed = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (node.xFixed) {
node.x = distribution[0].minPos;
node.xFixed = false;
distribution[0].minPos += distribution[0].nodeSpacing;
}
} }
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
else {
if (node.yFixed) {
node.y = distribution[0].minPos;
node.yFixed = false;
// 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;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
} }
} }
// stabilize the system after positioning. This function calls zoomToFit.
// stabilize the system after positioning. This function calls zoomExtent.
this._doStabilize(); 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();
}
}
}, },
@ -12242,7 +12239,12 @@ var HierarchicalLayoutMixin = {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
node.xFixed = true; node.xFixed = true;
node.yFixed = true; node.yFixed = true;
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
else {
node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
if (!distribution.hasOwnProperty(node.level)) { if (!distribution.hasOwnProperty(node.level)) {
distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0}; distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
} }
@ -12345,9 +12347,23 @@ var HierarchicalLayoutMixin = {
} }
// if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here. // 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;
var nodeMoved = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
else {
if (childNode.yFixed && childNode.level > parentLevel) {
childNode.yFixed = false;
childNode.y = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
if (nodeMoved == true) {
distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing; distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
if (childNode.edges.length > 1) { if (childNode.edges.length > 1) {
this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level); this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
@ -15095,7 +15111,7 @@ var NavigationMixin = {
this.navigationDivs = {}; this.navigationDivs = {};
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends']; var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomToFit'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper"; this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
@ -15622,7 +15638,8 @@ function Graph (container, data, options) {
hierarchicalLayout: { hierarchicalLayout: {
enabled:false, enabled:false,
levelSeparation: 150, levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD" // UD, DU, LR, RL
}, },
smoothCurves: true, smoothCurves: true,
maxVelocity: 10, maxVelocity: 10,
@ -15727,10 +15744,11 @@ function Graph (container, data, options) {
} }
else { else {
// zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here. // 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 (this.stabilize == false) {
this.zoomExtent(true,this.constants.clustering.enabled);
}
} }
// if clustering is disabled, the simulation will have started in the setData function // if clustering is disabled, the simulation will have started in the setData function
if (this.constants.clustering.enabled) { if (this.constants.clustering.enabled) {
this.startWithClustering(); this.startWithClustering();
@ -15773,10 +15791,10 @@ Graph.prototype._getRange = function() {
for (var nodeId in this.nodes) { for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[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;}
if (minX > (node.x)) {minX = node.x;}
if (maxX < (node.x)) {maxX = node.x;}
if (minY > (node.y)) {minY = node.y;}
if (maxY < (node.y)) {maxY = node.y;}
} }
} }
return {minX: minX, maxX: maxX, minY: minY, maxY: maxY}; return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
@ -15816,10 +15834,13 @@ Graph.prototype._centerGraph = function(range) {
* *
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false; * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
*/ */
Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
if (initialZoom === undefined) { if (initialZoom === undefined) {
initialZoom = false; initialZoom = false;
} }
if (disableStart === undefined) {
disableStart = false;
}
var range = this._getRange(); var range = this._getRange();
var zoomLevel; var zoomLevel;
@ -15844,6 +15865,10 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good. zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
} }
} }
// correct for larger canvasses.
var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
zoomLevel *= factor;
} }
else { else {
var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1; var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
@ -15859,10 +15884,12 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 1.0; zoomLevel = 1.0;
} }
this.pinch.mousewheelScale = zoomLevel; this.pinch.mousewheelScale = zoomLevel;
this._setScale(zoomLevel); this._setScale(zoomLevel);
this._centerGraph(range); this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
if (disableStart == false) {
this.moving = true; this.moving = true;
this.start(); this.start();
} }
@ -16394,7 +16421,6 @@ Graph.prototype._onTap = function (event) {
Graph.prototype._onDoubleTap = function (event) { Graph.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center); var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer); this._handleDoubleTap(pointer);
}; };
@ -17181,7 +17207,7 @@ Graph.prototype._doStabilize = function() {
count++; count++;
} }
this.zoomToFit(false,true);
this.zoomExtent(false,true);
}; };
@ -17409,12 +17435,6 @@ Graph.prototype._initializeMixinLoaders = function () {
/** /**
* vis.js module exports * vis.js module exports
*/ */

+ 7
- 7
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 25
- 4
docs/graph.html View File

@ -1663,12 +1663,20 @@ var options: {
hierarchicalLayout: true hierarchicalLayout: true
} }
// advanced configuration for keyboard controls
// advanced configuration for hierarchical layout
var options: { var options: {
hierarchicalLayout: { hierarchicalLayout: {
enabled:false, enabled:false,
levelSeparation: 150, levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD"
}
}
// partial configuration automatically sets enabled to true
var options: {
hierarchicalLayout: {
nodeSpacing: 100,
direction: "UD"
} }
} }
</pre> </pre>
@ -1692,13 +1700,20 @@ var options: {
<td>levelSeparation</td> <td>levelSeparation</td>
<td>Number</td> <td>Number</td>
<td>150</td> <td>150</td>
<td>This defines the space between levels (in the Y-direction).</td>
<td>This defines the space between levels (in the Y-direction, considering UP-DOWN direction).</td>
</tr> </tr>
<tr> <tr>
<td>nodeSpacing</td> <td>nodeSpacing</td>
<td>Number</td> <td>Number</td>
<td>100</td> <td>100</td>
<td>This defines the space between nodes in the same level (in the X-direction).</td>
<td>This defines the space between nodes in the same level (in the X-direction, considering UP-DOWN direction).</td>
</tr>
<tr>
<td>direction</td>
<td>String</td>
<td>UD</td>
<td>This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
These need to be supplied by the acronyms in parentheses.</td>
</tr> </tr>
</table> </table>
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
@ -1778,6 +1793,12 @@ var options: {
or in percentages.</td> or in percentages.</td>
</tr> </tr>
<tr>
<td>zoomExtent</td>
<td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
</tr>
</table> </table>
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>

+ 1
- 1
examples/graph/20_navigation.html View File

@ -156,7 +156,7 @@
<td><div class="table_content">Move right</div></td> <td><div class="table_content">Move right</div></td>
<td><div class="table_content">Zoom in</div></td> <td><div class="table_content">Zoom in</div></td>
<td><div class="table_content">Zoom out</div></td> <td><div class="table_content">Zoom out</div></td>
<td><div class="table_content">Zoom extends</div></td>
<td><div class="table_content">Zoom extent</div></td>
</tr> </tr>
</table> </table>
<br /> <br />

+ 332
- 331
examples/graph/22_les_miserables.html View File

@ -17,341 +17,341 @@
function draw() { function draw() {
// create some nodes // create some nodes
var nodes = [ var nodes = [
{id:0,"labelIGNORE":"Myriel","group":1},
{id:1,"labelIGNORE":"Napoleon","group":1},
{id:2,"labelIGNORE":"Mlle.Baptistine","group":1},
{id:3,"labelIGNORE":"Mme.Magloire","group":1},
{id:4,"labelIGNORE":"CountessdeLo","group":1},
{id:5,"labelIGNORE":"Geborand","group":1},
{id:6,"labelIGNORE":"Champtercier","group":1},
{id:7,"labelIGNORE":"Cravatte","group":1},
{id:8,"labelIGNORE":"Count","group":1},
{id:9,"labelIGNORE":"OldMan","group":1},
{id:10,"labelIGNORE":"Labarre","group":2},
{id:11,"labelIGNORE":"Valjean","group":2},
{id:12,"labelIGNORE":"Marguerite","group":3},
{id:13,"labelIGNORE":"Mme.deR","group":2},
{id:14,"labelIGNORE":"Isabeau","group":2},
{id:15,"labelIGNORE":"Gervais","group":2},
{id:16,"labelIGNORE":"Tholomyes","group":3},
{id:17,"labelIGNORE":"Listolier","group":3},
{id:18,"labelIGNORE":"Fameuil","group":3},
{id:19,"labelIGNORE":"Blacheville","group":3},
{id:20,"labelIGNORE":"Favourite","group":3},
{id:21,"labelIGNORE":"Dahlia","group":3},
{id:22,"labelIGNORE":"Zephine","group":3},
{id:23,"labelIGNORE":"Fantine","group":3},
{id:24,"labelIGNORE":"Mme.Thenardier","group":4},
{id:25,"labelIGNORE":"Thenardier","group":4},
{id:26,"labelIGNORE":"Cosette","group":5},
{id:27,"labelIGNORE":"Javert","group":4},
{id:28,"labelIGNORE":"Fauchelevent","group":0},
{id:29,"labelIGNORE":"Bamatabois","group":2},
{id:30,"labelIGNORE":"Perpetue","group":3},
{id:31,"labelIGNORE":"Simplice","group":2},
{id:32,"labelIGNORE":"Scaufflaire","group":2},
{id:33,"labelIGNORE":"Woman1","group":2},
{id:34,"labelIGNORE":"Judge","group":2},
{id:35,"labelIGNORE":"Champmathieu","group":2},
{id:36,"labelIGNORE":"Brevet","group":2},
{id:37,"labelIGNORE":"Chenildieu","group":2},
{id:38,"labelIGNORE":"Cochepaille","group":2},
{id:39,"labelIGNORE":"Pontmercy","group":4},
{id:40,"labelIGNORE":"Boulatruelle","group":6},
{id:41,"labelIGNORE":"Eponine","group":4},
{id:42,"labelIGNORE":"Anzelma","group":4},
{id:43,"labelIGNORE":"Woman2","group":5},
{id:44,"labelIGNORE":"MotherInnocent","group":0},
{id:45,"labelIGNORE":"Gribier","group":0},
{id:46,"labelIGNORE":"Jondrette","group":7},
{id:47,"labelIGNORE":"Mme.Burgon","group":7},
{id:48,"labelIGNORE":"Gavroche","group":8},
{id:49,"labelIGNORE":"Gillenormand","group":5},
{id:50,"labelIGNORE":"Magnon","group":5},
{id:51,"labelIGNORE":"Mlle.Gillenormand","group":5},
{id:52,"labelIGNORE":"Mme.Pontmercy","group":5},
{id:53,"labelIGNORE":"Mlle.Vaubois","group":5},
{id:54,"labelIGNORE":"Lt.Gillenormand","group":5},
{id:55,"labelIGNORE":"Marius","group":8},
{id:56,"labelIGNORE":"BaronessT","group":5},
{id:57,"labelIGNORE":"Mabeuf","group":8},
{id:58,"labelIGNORE":"Enjolras","group":8},
{id:59,"labelIGNORE":"Combeferre","group":8},
{id:60,"labelIGNORE":"Prouvaire","group":8},
{id:61,"labelIGNORE":"Feuilly","group":8},
{id:62,"labelIGNORE":"Courfeyrac","group":8},
{id:63,"labelIGNORE":"Bahorel","group":8},
{id:64,"labelIGNORE":"Bossuet","group":8},
{id:65,"labelIGNORE":"Joly","group":8},
{id:66,"labelIGNORE":"Grantaire","group":8},
{id:67,"labelIGNORE":"MotherPlutarch","group":9},
{id:68,"labelIGNORE":"Gueulemer","group":4},
{id:69,"labelIGNORE":"Babet","group":4},
{id:70,"labelIGNORE":"Claquesous","group":4},
{id:71,"labelIGNORE":"Montparnasse","group":4},
{id:72,"labelIGNORE":"Toussaint","group":5},
{id:73,"labelIGNORE":"Child1","group":10},
{id:74,"labelIGNORE":"Child2","group":10},
{id:75,"labelIGNORE":"Brujon","group":4},
{id:76,"labelIGNORE":"Mme.Hucheloup","group":8}
{id:0,"labelHidden":"Myriel","group":1},
{id:1,"labelHidden":"Napoleon","group":1},
{id:2,"labelHidden":"Mlle.Baptistine","group":1},
{id:3,"labelHidden":"Mme.Magloire","group":1},
{id:4,"labelHidden":"CountessdeLo","group":1},
{id:5,"labelHidden":"Geborand","group":1},
{id:6,"labelHidden":"Champtercier","group":1},
{id:7,"labelHidden":"Cravatte","group":1},
{id:8,"labelHidden":"Count","group":1},
{id:9,"labelHidden":"OldMan","group":1},
{id:10,"labelHidden":"Labarre","group":2},
{id:11,"labelHidden":"Valjean","group":2},
{id:12,"labelHidden":"Marguerite","group":3},
{id:13,"labelHidden":"Mme.deR","group":2},
{id:14,"labelHidden":"Isabeau","group":2},
{id:15,"labelHidden":"Gervais","group":2},
{id:16,"labelHidden":"Tholomyes","group":3},
{id:17,"labelHidden":"Listolier","group":3},
{id:18,"labelHidden":"Fameuil","group":3},
{id:19,"labelHidden":"Blacheville","group":3},
{id:20,"labelHidden":"Favourite","group":3},
{id:21,"labelHidden":"Dahlia","group":3},
{id:22,"labelHidden":"Zephine","group":3},
{id:23,"labelHidden":"Fantine","group":3},
{id:24,"labelHidden":"Mme.Thenardier","group":4},
{id:25,"labelHidden":"Thenardier","group":4},
{id:26,"labelHidden":"Cosette","group":5},
{id:27,"labelHidden":"Javert","group":4},
{id:28,"labelHidden":"Fauchelevent","group":0},
{id:29,"labelHidden":"Bamatabois","group":2},
{id:30,"labelHidden":"Perpetue","group":3},
{id:31,"labelHidden":"Simplice","group":2},
{id:32,"labelHidden":"Scaufflaire","group":2},
{id:33,"labelHidden":"Woman1","group":2},
{id:34,"labelHidden":"Judge","group":2},
{id:35,"labelHidden":"Champmathieu","group":2},
{id:36,"labelHidden":"Brevet","group":2},
{id:37,"labelHidden":"Chenildieu","group":2},
{id:38,"labelHidden":"Cochepaille","group":2},
{id:39,"labelHidden":"Pontmercy","group":4},
{id:40,"labelHidden":"Boulatruelle","group":6},
{id:41,"labelHidden":"Eponine","group":4},
{id:42,"labelHidden":"Anzelma","group":4},
{id:43,"labelHidden":"Woman2","group":5},
{id:44,"labelHidden":"MotherInnocent","group":0},
{id:45,"labelHidden":"Gribier","group":0},
{id:46,"labelHidden":"Jondrette","group":7},
{id:47,"labelHidden":"Mme.Burgon","group":7},
{id:48,"labelHidden":"Gavroche","group":8},
{id:49,"labelHidden":"Gillenormand","group":5},
{id:50,"labelHidden":"Magnon","group":5},
{id:51,"labelHidden":"Mlle.Gillenormand","group":5},
{id:52,"labelHidden":"Mme.Pontmercy","group":5},
{id:53,"labelHidden":"Mlle.Vaubois","group":5},
{id:54,"labelHidden":"Lt.Gillenormand","group":5},
{id:55,"labelHidden":"Marius","group":8},
{id:56,"labelHidden":"BaronessT","group":5},
{id:57,"labelHidden":"Mabeuf","group":8},
{id:58,"labelHidden":"Enjolras","group":8},
{id:59,"labelHidden":"Combeferre","group":8},
{id:60,"labelHidden":"Prouvaire","group":8},
{id:61,"labelHidden":"Feuilly","group":8},
{id:62,"labelHidden":"Courfeyrac","group":8},
{id:63,"labelHidden":"Bahorel","group":8},
{id:64,"labelHidden":"Bossuet","group":8},
{id:65,"labelHidden":"Joly","group":8},
{id:66,"labelHidden":"Grantaire","group":8},
{id:67,"labelHidden":"MotherPlutarch","group":9},
{id:68,"labelHidden":"Gueulemer","group":4},
{id:69,"labelHidden":"Babet","group":4},
{id:70,"labelHidden":"Claquesous","group":4},
{id:71,"labelHidden":"Montparnasse","group":4},
{id:72,"labelHidden":"Toussaint","group":5},
{id:73,"labelHidden":"Child1","group":10},
{id:74,"labelHidden":"Child2","group":10},
{id:75,"labelHidden":"Brujon","group":4},
{id:76,"labelHidden":"Mme.Hucheloup","group":8}
]; ];
// create some edges // create some edges
var edges = [ var edges = [
{"from":1,"to":0,"valueIGNORED":1},
{"from":2,"to":0,"valueIGNORED":8},
{"from":3,"to":0,"valueIGNORED":10},
{"from":3,"to":2,"valueIGNORED":6},
{"from":4,"to":0,"valueIGNORED":1},
{"from":5,"to":0,"valueIGNORED":1},
{"from":6,"to":0,"valueIGNORED":1},
{"from":7,"to":0,"valueIGNORED":1},
{"from":8,"to":0,"valueIGNORED":2},
{"from":9,"to":0,"valueIGNORED":1},
{"from":11,"to":10,"valueIGNORED":1},
{"from":11,"to":3,"valueIGNORED":3},
{"from":11,"to":2,"valueIGNORED":3},
{"from":11,"to":0,"valueIGNORED":5},
{"from":12,"to":11,"valueIGNORED":1},
{"from":13,"to":11,"valueIGNORED":1},
{"from":14,"to":11,"valueIGNORED":1},
{"from":15,"to":11,"valueIGNORED":1},
{"from":17,"to":16,"valueIGNORED":4},
{"from":18,"to":16,"valueIGNORED":4},
{"from":18,"to":17,"valueIGNORED":4},
{"from":19,"to":16,"valueIGNORED":4},
{"from":19,"to":17,"valueIGNORED":4},
{"from":19,"to":18,"valueIGNORED":4},
{"from":20,"to":16,"valueIGNORED":3},
{"from":20,"to":17,"valueIGNORED":3},
{"from":20,"to":18,"valueIGNORED":3},
{"from":20,"to":19,"valueIGNORED":4},
{"from":21,"to":16,"valueIGNORED":3},
{"from":21,"to":17,"valueIGNORED":3},
{"from":21,"to":18,"valueIGNORED":3},
{"from":21,"to":19,"valueIGNORED":3},
{"from":21,"to":20,"valueIGNORED":5},
{"from":22,"to":16,"valueIGNORED":3},
{"from":22,"to":17,"valueIGNORED":3},
{"from":22,"to":18,"valueIGNORED":3},
{"from":22,"to":19,"valueIGNORED":3},
{"from":22,"to":20,"valueIGNORED":4},
{"from":22,"to":21,"valueIGNORED":4},
{"from":23,"to":16,"valueIGNORED":3},
{"from":23,"to":17,"valueIGNORED":3},
{"from":23,"to":18,"valueIGNORED":3},
{"from":23,"to":19,"valueIGNORED":3},
{"from":23,"to":20,"valueIGNORED":4},
{"from":23,"to":21,"valueIGNORED":4},
{"from":23,"to":22,"valueIGNORED":4},
{"from":23,"to":12,"valueIGNORED":2},
{"from":23,"to":11,"valueIGNORED":9},
{"from":24,"to":23,"valueIGNORED":2},
{"from":24,"to":11,"valueIGNORED":7},
{"from":25,"to":24,"valueIGNORED":13},
{"from":25,"to":23,"valueIGNORED":1},
{"from":25,"to":11,"valueIGNORED":12},
{"from":26,"to":24,"valueIGNORED":4},
{"from":26,"to":11,"valueIGNORED":31},
{"from":26,"to":16,"valueIGNORED":1},
{"from":26,"to":25,"valueIGNORED":1},
{"from":27,"to":11,"valueIGNORED":17},
{"from":27,"to":23,"valueIGNORED":5},
{"from":27,"to":25,"valueIGNORED":5},
{"from":27,"to":24,"valueIGNORED":1},
{"from":27,"to":26,"valueIGNORED":1},
{"from":28,"to":11,"valueIGNORED":8},
{"from":28,"to":27,"valueIGNORED":1},
{"from":29,"to":23,"valueIGNORED":1},
{"from":29,"to":27,"valueIGNORED":1},
{"from":29,"to":11,"valueIGNORED":2},
{"from":30,"to":23,"valueIGNORED":1},
{"from":31,"to":30,"valueIGNORED":2},
{"from":31,"to":11,"valueIGNORED":3},
{"from":31,"to":23,"valueIGNORED":2},
{"from":31,"to":27,"valueIGNORED":1},
{"from":32,"to":11,"valueIGNORED":1},
{"from":33,"to":11,"valueIGNORED":2},
{"from":33,"to":27,"valueIGNORED":1},
{"from":34,"to":11,"valueIGNORED":3},
{"from":34,"to":29,"valueIGNORED":2},
{"from":35,"to":11,"valueIGNORED":3},
{"from":35,"to":34,"valueIGNORED":3},
{"from":35,"to":29,"valueIGNORED":2},
{"from":36,"to":34,"valueIGNORED":2},
{"from":36,"to":35,"valueIGNORED":2},
{"from":36,"to":11,"valueIGNORED":2},
{"from":36,"to":29,"valueIGNORED":1},
{"from":37,"to":34,"valueIGNORED":2},
{"from":37,"to":35,"valueIGNORED":2},
{"from":37,"to":36,"valueIGNORED":2},
{"from":37,"to":11,"valueIGNORED":2},
{"from":37,"to":29,"valueIGNORED":1},
{"from":38,"to":34,"valueIGNORED":2},
{"from":38,"to":35,"valueIGNORED":2},
{"from":38,"to":36,"valueIGNORED":2},
{"from":38,"to":37,"valueIGNORED":2},
{"from":38,"to":11,"valueIGNORED":2},
{"from":38,"to":29,"valueIGNORED":1},
{"from":39,"to":25,"valueIGNORED":1},
{"from":40,"to":25,"valueIGNORED":1},
{"from":41,"to":24,"valueIGNORED":2},
{"from":41,"to":25,"valueIGNORED":3},
{"from":42,"to":41,"valueIGNORED":2},
{"from":42,"to":25,"valueIGNORED":2},
{"from":42,"to":24,"valueIGNORED":1},
{"from":43,"to":11,"valueIGNORED":3},
{"from":43,"to":26,"valueIGNORED":1},
{"from":43,"to":27,"valueIGNORED":1},
{"from":44,"to":28,"valueIGNORED":3},
{"from":44,"to":11,"valueIGNORED":1},
{"from":45,"to":28,"valueIGNORED":2},
{"from":47,"to":46,"valueIGNORED":1},
{"from":48,"to":47,"valueIGNORED":2},
{"from":48,"to":25,"valueIGNORED":1},
{"from":48,"to":27,"valueIGNORED":1},
{"from":48,"to":11,"valueIGNORED":1},
{"from":49,"to":26,"valueIGNORED":3},
{"from":49,"to":11,"valueIGNORED":2},
{"from":50,"to":49,"valueIGNORED":1},
{"from":50,"to":24,"valueIGNORED":1},
{"from":51,"to":49,"valueIGNORED":9},
{"from":51,"to":26,"valueIGNORED":2},
{"from":51,"to":11,"valueIGNORED":2},
{"from":52,"to":51,"valueIGNORED":1},
{"from":52,"to":39,"valueIGNORED":1},
{"from":53,"to":51,"valueIGNORED":1},
{"from":54,"to":51,"valueIGNORED":2},
{"from":54,"to":49,"valueIGNORED":1},
{"from":54,"to":26,"valueIGNORED":1},
{"from":55,"to":51,"valueIGNORED":6},
{"from":55,"to":49,"valueIGNORED":12},
{"from":55,"to":39,"valueIGNORED":1},
{"from":55,"to":54,"valueIGNORED":1},
{"from":55,"to":26,"valueIGNORED":21},
{"from":55,"to":11,"valueIGNORED":19},
{"from":55,"to":16,"valueIGNORED":1},
{"from":55,"to":25,"valueIGNORED":2},
{"from":55,"to":41,"valueIGNORED":5},
{"from":55,"to":48,"valueIGNORED":4},
{"from":56,"to":49,"valueIGNORED":1},
{"from":56,"to":55,"valueIGNORED":1},
{"from":57,"to":55,"valueIGNORED":1},
{"from":57,"to":41,"valueIGNORED":1},
{"from":57,"to":48,"valueIGNORED":1},
{"from":58,"to":55,"valueIGNORED":7},
{"from":58,"to":48,"valueIGNORED":7},
{"from":58,"to":27,"valueIGNORED":6},
{"from":58,"to":57,"valueIGNORED":1},
{"from":58,"to":11,"valueIGNORED":4},
{"from":59,"to":58,"valueIGNORED":15},
{"from":59,"to":55,"valueIGNORED":5},
{"from":59,"to":48,"valueIGNORED":6},
{"from":59,"to":57,"valueIGNORED":2},
{"from":60,"to":48,"valueIGNORED":1},
{"from":60,"to":58,"valueIGNORED":4},
{"from":60,"to":59,"valueIGNORED":2},
{"from":61,"to":48,"valueIGNORED":2},
{"from":61,"to":58,"valueIGNORED":6},
{"from":61,"to":60,"valueIGNORED":2},
{"from":61,"to":59,"valueIGNORED":5},
{"from":61,"to":57,"valueIGNORED":1},
{"from":61,"to":55,"valueIGNORED":1},
{"from":62,"to":55,"valueIGNORED":9},
{"from":62,"to":58,"valueIGNORED":17},
{"from":62,"to":59,"valueIGNORED":13},
{"from":62,"to":48,"valueIGNORED":7},
{"from":62,"to":57,"valueIGNORED":2},
{"from":62,"to":41,"valueIGNORED":1},
{"from":62,"to":61,"valueIGNORED":6},
{"from":62,"to":60,"valueIGNORED":3},
{"from":63,"to":59,"valueIGNORED":5},
{"from":63,"to":48,"valueIGNORED":5},
{"from":63,"to":62,"valueIGNORED":6},
{"from":63,"to":57,"valueIGNORED":2},
{"from":63,"to":58,"valueIGNORED":4},
{"from":63,"to":61,"valueIGNORED":3},
{"from":63,"to":60,"valueIGNORED":2},
{"from":63,"to":55,"valueIGNORED":1},
{"from":64,"to":55,"valueIGNORED":5},
{"from":64,"to":62,"valueIGNORED":12},
{"from":64,"to":48,"valueIGNORED":5},
{"from":64,"to":63,"valueIGNORED":4},
{"from":64,"to":58,"valueIGNORED":10},
{"from":64,"to":61,"valueIGNORED":6},
{"from":64,"to":60,"valueIGNORED":2},
{"from":64,"to":59,"valueIGNORED":9},
{"from":64,"to":57,"valueIGNORED":1},
{"from":64,"to":11,"valueIGNORED":1},
{"from":65,"to":63,"valueIGNORED":5},
{"from":65,"to":64,"valueIGNORED":7},
{"from":65,"to":48,"valueIGNORED":3},
{"from":65,"to":62,"valueIGNORED":5},
{"from":65,"to":58,"valueIGNORED":5},
{"from":65,"to":61,"valueIGNORED":5},
{"from":65,"to":60,"valueIGNORED":2},
{"from":65,"to":59,"valueIGNORED":5},
{"from":65,"to":57,"valueIGNORED":1},
{"from":65,"to":55,"valueIGNORED":2},
{"from":66,"to":64,"valueIGNORED":3},
{"from":66,"to":58,"valueIGNORED":3},
{"from":66,"to":59,"valueIGNORED":1},
{"from":66,"to":62,"valueIGNORED":2},
{"from":66,"to":65,"valueIGNORED":2},
{"from":66,"to":48,"valueIGNORED":1},
{"from":66,"to":63,"valueIGNORED":1},
{"from":66,"to":61,"valueIGNORED":1},
{"from":66,"to":60,"valueIGNORED":1},
{"from":67,"to":57,"valueIGNORED":3},
{"from":68,"to":25,"valueIGNORED":5},
{"from":68,"to":11,"valueIGNORED":1},
{"from":68,"to":24,"valueIGNORED":1},
{"from":68,"to":27,"valueIGNORED":1},
{"from":68,"to":48,"valueIGNORED":1},
{"from":68,"to":41,"valueIGNORED":1},
{"from":69,"to":25,"valueIGNORED":6},
{"from":69,"to":68,"valueIGNORED":6},
{"from":69,"to":11,"valueIGNORED":1},
{"from":69,"to":24,"valueIGNORED":1},
{"from":69,"to":27,"valueIGNORED":2},
{"from":69,"to":48,"valueIGNORED":1},
{"from":69,"to":41,"valueIGNORED":1},
{"from":70,"to":25,"valueIGNORED":4},
{"from":70,"to":69,"valueIGNORED":4},
{"from":70,"to":68,"valueIGNORED":4},
{"from":70,"to":11,"valueIGNORED":1},
{"from":70,"to":24,"valueIGNORED":1},
{"from":70,"to":27,"valueIGNORED":1},
{"from":70,"to":41,"valueIGNORED":1},
{"from":70,"to":58,"valueIGNORED":1},
{"from":71,"to":27,"valueIGNORED":1},
{"from":71,"to":69,"valueIGNORED":2},
{"from":71,"to":68,"valueIGNORED":2},
{"from":71,"to":70,"valueIGNORED":2},
{"from":71,"to":11,"valueIGNORED":1},
{"from":71,"to":48,"valueIGNORED":1},
{"from":71,"to":41,"valueIGNORED":1},
{"from":71,"to":25,"valueIGNORED":1},
{"from":72,"to":26,"valueIGNORED":2},
{"from":72,"to":27,"valueIGNORED":1},
{"from":72,"to":11,"valueIGNORED":1},
{"from":73,"to":48,"valueIGNORED":2},
{"from":74,"to":48,"valueIGNORED":2},
{"from":74,"to":73,"valueIGNORED":3},
{"from":75,"to":69,"valueIGNORED":3},
{"from":75,"to":68,"valueIGNORED":3},
{"from":75,"to":25,"valueIGNORED":3},
{"from":75,"to":48,"valueIGNORED":1},
{"from":75,"to":41,"valueIGNORED":1},
{"from":75,"to":70,"valueIGNORED":1},
{"from":75,"to":71,"valueIGNORED":1},
{"from":76,"to":64,"valueIGNORED":1},
{"from":76,"to":65,"valueIGNORED":1},
{"from":76,"to":66,"valueIGNORED":1},
{"from":76,"to":63,"valueIGNORED":1},
{"from":76,"to":62,"valueIGNORED":1},
{"from":76,"to":48,"valueIGNORED":1},
{"from":76,"to":58,"valueIGNORED":1}
{"from":1,"to":0},
{"from":2,"to":0},
{"from":3,"to":0},
{"from":3,"to":2},
{"from":4,"to":0},
{"from":5,"to":0},
{"from":6,"to":0},
{"from":7,"to":0},
{"from":8,"to":0},
{"from":9,"to":0},
{"from":11,"to":10},
{"from":11,"to":3},
{"from":11,"to":2},
{"from":11,"to":0},
{"from":12,"to":11},
{"from":13,"to":11},
{"from":14,"to":11},
{"from":15,"to":11},
{"from":17,"to":16},
{"from":18,"to":16},
{"from":18,"to":17},
{"from":19,"to":16},
{"from":19,"to":17},
{"from":19,"to":18},
{"from":20,"to":16},
{"from":20,"to":17},
{"from":20,"to":18},
{"from":20,"to":19},
{"from":21,"to":16},
{"from":21,"to":17},
{"from":21,"to":18},
{"from":21,"to":19},
{"from":21,"to":20},
{"from":22,"to":16},
{"from":22,"to":17},
{"from":22,"to":18},
{"from":22,"to":19},
{"from":22,"to":20},
{"from":22,"to":21},
{"from":23,"to":16},
{"from":23,"to":17},
{"from":23,"to":18},
{"from":23,"to":19},
{"from":23,"to":20},
{"from":23,"to":21},
{"from":23,"to":22},
{"from":23,"to":12},
{"from":23,"to":11},
{"from":24,"to":23},
{"from":24,"to":11},
{"from":25,"to":24},
{"from":25,"to":23},
{"from":25,"to":11},
{"from":26,"to":24},
{"from":26,"to":11},
{"from":26,"to":16},
{"from":26,"to":25},
{"from":27,"to":11},
{"from":27,"to":23},
{"from":27,"to":25},
{"from":27,"to":24},
{"from":27,"to":26},
{"from":28,"to":11},
{"from":28,"to":27},
{"from":29,"to":23},
{"from":29,"to":27},
{"from":29,"to":11},
{"from":30,"to":23},
{"from":31,"to":30},
{"from":31,"to":11},
{"from":31,"to":23},
{"from":31,"to":27},
{"from":32,"to":11},
{"from":33,"to":11},
{"from":33,"to":27},
{"from":34,"to":11},
{"from":34,"to":29},
{"from":35,"to":11},
{"from":35,"to":34},
{"from":35,"to":29},
{"from":36,"to":34},
{"from":36,"to":35},
{"from":36,"to":11},
{"from":36,"to":29},
{"from":37,"to":34},
{"from":37,"to":35},
{"from":37,"to":36},
{"from":37,"to":11},
{"from":37,"to":29},
{"from":38,"to":34},
{"from":38,"to":35},
{"from":38,"to":36},
{"from":38,"to":37},
{"from":38,"to":11},
{"from":38,"to":29},
{"from":39,"to":25},
{"from":40,"to":25},
{"from":41,"to":24},
{"from":41,"to":25},
{"from":42,"to":41},
{"from":42,"to":25},
{"from":42,"to":24},
{"from":43,"to":11},
{"from":43,"to":26},
{"from":43,"to":27},
{"from":44,"to":28},
{"from":44,"to":11},
{"from":45,"to":28},
{"from":47,"to":46},
{"from":48,"to":47},
{"from":48,"to":25},
{"from":48,"to":27},
{"from":48,"to":11},
{"from":49,"to":26},
{"from":49,"to":11},
{"from":50,"to":49},
{"from":50,"to":24},
{"from":51,"to":49},
{"from":51,"to":26},
{"from":51,"to":11},
{"from":52,"to":51},
{"from":52,"to":39},
{"from":53,"to":51},
{"from":54,"to":51},
{"from":54,"to":49},
{"from":54,"to":26},
{"from":55,"to":51},
{"from":55,"to":49},
{"from":55,"to":39},
{"from":55,"to":54},
{"from":55,"to":26},
{"from":55,"to":11},
{"from":55,"to":16},
{"from":55,"to":25},
{"from":55,"to":41},
{"from":55,"to":48},
{"from":56,"to":49},
{"from":56,"to":55},
{"from":57,"to":55},
{"from":57,"to":41},
{"from":57,"to":48},
{"from":58,"to":55},
{"from":58,"to":48},
{"from":58,"to":27},
{"from":58,"to":57},
{"from":58,"to":11},
{"from":59,"to":58},
{"from":59,"to":55},
{"from":59,"to":48},
{"from":59,"to":57},
{"from":60,"to":48},
{"from":60,"to":58},
{"from":60,"to":59},
{"from":61,"to":48},
{"from":61,"to":58},
{"from":61,"to":60},
{"from":61,"to":59},
{"from":61,"to":57},
{"from":61,"to":55},
{"from":62,"to":55},
{"from":62,"to":58},
{"from":62,"to":59},
{"from":62,"to":48},
{"from":62,"to":57},
{"from":62,"to":41},
{"from":62,"to":61},
{"from":62,"to":60},
{"from":63,"to":59},
{"from":63,"to":48},
{"from":63,"to":62},
{"from":63,"to":57},
{"from":63,"to":58},
{"from":63,"to":61},
{"from":63,"to":60},
{"from":63,"to":55},
{"from":64,"to":55},
{"from":64,"to":62},
{"from":64,"to":48},
{"from":64,"to":63},
{"from":64,"to":58},
{"from":64,"to":61},
{"from":64,"to":60},
{"from":64,"to":59},
{"from":64,"to":57},
{"from":64,"to":11},
{"from":65,"to":63},
{"from":65,"to":64},
{"from":65,"to":48},
{"from":65,"to":62},
{"from":65,"to":58},
{"from":65,"to":61},
{"from":65,"to":60},
{"from":65,"to":59},
{"from":65,"to":57},
{"from":65,"to":55},
{"from":66,"to":64},
{"from":66,"to":58},
{"from":66,"to":59},
{"from":66,"to":62},
{"from":66,"to":65},
{"from":66,"to":48},
{"from":66,"to":63},
{"from":66,"to":61},
{"from":66,"to":60},
{"from":67,"to":57},
{"from":68,"to":25},
{"from":68,"to":11},
{"from":68,"to":24},
{"from":68,"to":27},
{"from":68,"to":48},
{"from":68,"to":41},
{"from":69,"to":25},
{"from":69,"to":68},
{"from":69,"to":11},
{"from":69,"to":24},
{"from":69,"to":27},
{"from":69,"to":48},
{"from":69,"to":41},
{"from":70,"to":25},
{"from":70,"to":69},
{"from":70,"to":68},
{"from":70,"to":11},
{"from":70,"to":24},
{"from":70,"to":27},
{"from":70,"to":41},
{"from":70,"to":58},
{"from":71,"to":27},
{"from":71,"to":69},
{"from":71,"to":68},
{"from":71,"to":70},
{"from":71,"to":11},
{"from":71,"to":48},
{"from":71,"to":41},
{"from":71,"to":25},
{"from":72,"to":26},
{"from":72,"to":27},
{"from":72,"to":11},
{"from":73,"to":48},
{"from":74,"to":48},
{"from":74,"to":73},
{"from":75,"to":69},
{"from":75,"to":68},
{"from":75,"to":25},
{"from":75,"to":48},
{"from":75,"to":41},
{"from":75,"to":70},
{"from":75,"to":71},
{"from":76,"to":64},
{"from":76,"to":65},
{"from":76,"to":66},
{"from":76,"to":63},
{"from":76,"to":62},
{"from":76,"to":48},
{"from":76,"to":58}
]; ];
// create a graph // create a graph
@ -363,6 +363,7 @@
}; };
var options = {nodes: {shape:'circle'},stabilize: false}; var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options); var graph = new vis.Graph(container, data, options);
} }
</script> </script>
</head> </head>

+ 36
- 2
examples/graph/23_hierarchical_layout.html View File

@ -21,6 +21,8 @@
var edges = null; var edges = null;
var graph = null; var graph = null;
function draw() { function draw() {
nodes = []; nodes = [];
edges = []; edges = [];
@ -75,12 +77,14 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var directionInput = document.getElementById("direction");
var options = { var options = {
edges: { edges: {
}, },
stabilize: false, stabilize: false,
hierarchicalLayout:true
hierarchicalLayout: {
direction: directionInput.value
}
}; };
graph = new vis.Graph(container, data, options); graph = new vis.Graph(container, data, options);
@ -89,6 +93,7 @@
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
}); });
} }
</script> </script>
</head> </head>
@ -104,6 +109,35 @@
<input id="nodeCount" type="text" value="25" style="width: 50px;"> <input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go"> <input type="submit" value="Go">
</form> </form>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function() {
directionInput.value = "UD";
draw();
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function() {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function() {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function() {
directionInput.value = "RL";
draw();
};
</script>
<br> <br>
<div id="mygraph"></div> <div id="mygraph"></div>

+ 21
- 17
src/graph/Graph.js View File

@ -138,7 +138,8 @@ function Graph (container, data, options) {
hierarchicalLayout: { hierarchicalLayout: {
enabled:false, enabled:false,
levelSeparation: 150, levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD" // UD, DU, LR, RL
}, },
smoothCurves: true, smoothCurves: true,
maxVelocity: 10, maxVelocity: 10,
@ -243,10 +244,11 @@ function Graph (container, data, options) {
} }
else { else {
// zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here. // 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 (this.stabilize == false) {
this.zoomExtent(true,this.constants.clustering.enabled);
}
} }
// if clustering is disabled, the simulation will have started in the setData function // if clustering is disabled, the simulation will have started in the setData function
if (this.constants.clustering.enabled) { if (this.constants.clustering.enabled) {
this.startWithClustering(); this.startWithClustering();
@ -289,10 +291,10 @@ Graph.prototype._getRange = function() {
for (var nodeId in this.nodes) { for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) { if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[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;}
if (minX > (node.x)) {minX = node.x;}
if (maxX < (node.x)) {maxX = node.x;}
if (minY > (node.y)) {minY = node.y;}
if (maxY < (node.y)) {maxY = node.y;}
} }
} }
return {minX: minX, maxX: maxX, minY: minY, maxY: maxY}; return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
@ -332,10 +334,13 @@ Graph.prototype._centerGraph = function(range) {
* *
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false; * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
*/ */
Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
if (initialZoom === undefined) { if (initialZoom === undefined) {
initialZoom = false; initialZoom = false;
} }
if (disableStart === undefined) {
disableStart = false;
}
var range = this._getRange(); var range = this._getRange();
var zoomLevel; var zoomLevel;
@ -360,6 +365,10 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good. zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
} }
} }
// correct for larger canvasses.
var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
zoomLevel *= factor;
} }
else { else {
var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1; var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
@ -375,10 +384,12 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 1.0; zoomLevel = 1.0;
} }
this.pinch.mousewheelScale = zoomLevel; this.pinch.mousewheelScale = zoomLevel;
this._setScale(zoomLevel); this._setScale(zoomLevel);
this._centerGraph(range); this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
if (disableStart == false) {
this.moving = true; this.moving = true;
this.start(); this.start();
} }
@ -910,7 +921,6 @@ Graph.prototype._onTap = function (event) {
Graph.prototype._onDoubleTap = function (event) { Graph.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center); var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer); this._handleDoubleTap(pointer);
}; };
@ -1697,7 +1707,7 @@ Graph.prototype._doStabilize = function() {
count++; count++;
} }
this.zoomToFit(false,true);
this.zoomExtent(false,true);
}; };
@ -1924,9 +1934,3 @@ Graph.prototype._initializeMixinLoaders = function () {

+ 43
- 27
src/graph/graphMixins/HierarchicalLayoutMixin.js View File

@ -9,7 +9,9 @@ var HierarchicalLayoutMixin = {
*/ */
_setupHierarchicalLayout : function() { _setupHierarchicalLayout : function() {
if (this.constants.hierarchicalLayout.enabled == true) { if (this.constants.hierarchicalLayout.enabled == true) {
if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
this.constants.hierarchicalLayout.levelSeparation *= -1;
}
// get the size of the largest hubs and check if the user has defined a level for a node. // get the size of the largest hubs and check if the user has defined a level for a node.
var hubsize = 0; var hubsize = 0;
var node, nodeId; var node, nodeId;
@ -34,7 +36,7 @@ var HierarchicalLayoutMixin = {
// if the user defined some levels but not all, alert and run without hierarchical layout // if the user defined some levels but not all, alert and run without hierarchical layout
if (undefinedLevel == true && definedLevel == true) { 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.") 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);
this.zoomExtent(true,this.constants.clustering.enabled);
if (!this.constants.clustering.enabled) { if (!this.constants.clustering.enabled) {
this.start(); this.start();
} }
@ -73,33 +75,28 @@ var HierarchicalLayoutMixin = {
for (nodeId in distribution[0].nodes) { for (nodeId in distribution[0].nodes) {
if (distribution[0].nodes.hasOwnProperty(nodeId)) { if (distribution[0].nodes.hasOwnProperty(nodeId)) {
node = distribution[0].nodes[nodeId]; node = distribution[0].nodes[nodeId];
if (node.xFixed) {
node.x = distribution[0].minPos;
distribution[0].minPos += distribution[0].nodeSpacing;
node.xFixed = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (node.xFixed) {
node.x = distribution[0].minPos;
node.xFixed = false;
distribution[0].minPos += distribution[0].nodeSpacing;
}
} }
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
else {
if (node.yFixed) {
node.y = distribution[0].minPos;
node.yFixed = false;
// 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;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
} }
} }
// stabilize the system after positioning. This function calls zoomToFit.
// stabilize the system after positioning. This function calls zoomExtent.
this._doStabilize(); 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();
}
}
}, },
@ -120,7 +117,12 @@ var HierarchicalLayoutMixin = {
node = this.nodes[nodeId]; node = this.nodes[nodeId];
node.xFixed = true; node.xFixed = true;
node.yFixed = true; node.yFixed = true;
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
else {
node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
if (!distribution.hasOwnProperty(node.level)) { if (!distribution.hasOwnProperty(node.level)) {
distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0}; distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
} }
@ -223,9 +225,23 @@ var HierarchicalLayoutMixin = {
} }
// if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here. // 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;
var nodeMoved = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
else {
if (childNode.yFixed && childNode.level > parentLevel) {
childNode.yFixed = false;
childNode.y = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
if (nodeMoved == true) {
distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing; distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
if (childNode.edges.length > 1) { if (childNode.edges.length > 1) {
this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level); this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);

+ 1
- 1
src/graph/graphMixins/NavigationMixin.js View File

@ -26,7 +26,7 @@ var NavigationMixin = {
this.navigationDivs = {}; this.navigationDivs = {};
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends']; var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomToFit'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper"; this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";

Write Preview
Loading…
Cancel
Save