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

Released version 0.6.0

gh-pages
josdejong 10 years ago
parent
b8ab81bc20
commit
6ed2032917
14 changed files with 961 additions and 464 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +381
    -95
      dist/vis.js
  2. +10
    -10
      dist/vis.min.js
  3. +74
    -10
      docs/graph.html
  4. BIN
      download/vis.zip
  5. +3
    -12
      examples/graph/02_random_nodes.html
  6. +1
    -1
      examples/graph/20_navigation.html
  7. +12
    -1
      examples/graph/21_data_manipulation.html
  8. +332
    -331
      examples/graph/22_les_miserables.html
  9. +36
    -2
      examples/graph/23_hierarchical_layout.html
  10. +110
    -0
      examples/graph/25_physics_configuration.html
  11. +1
    -0
      examples/graph/index.html
  12. +0
    -1
      examples/timeline/03_much_data.html
  13. BIN
      img/gallery/graph/25_physics_configuration.png
  14. +1
    -1
      index.html

+ 381
- 95
dist/vis.js View File

@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version 0.5.1
* @date 2014-02-20
* @version 0.6.0
* @date 2014-03-05
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -10445,6 +10445,7 @@ function Edge (properties, graph, constants) {
this.width = constants.edges.width;
this.value = undefined;
this.length = constants.physics.springLength;
this.customLength = false;
this.selected = false;
this.smooth = constants.smoothCurves;
@ -10500,7 +10501,8 @@ Edge.prototype.setProperties = function(properties, constants) {
if (properties.title !== undefined) {this.title = properties.title;}
if (properties.width !== undefined) {this.width = properties.width;}
if (properties.value !== undefined) {this.value = properties.value;}
if (properties.length !== undefined) {this.length = properties.length;}
if (properties.length !== undefined) {this.length = properties.length;
this.customLength = true;}
// Added to support dashed lines
// David Jordan
@ -10644,7 +10646,7 @@ Edge.prototype._drawLine = function(ctx) {
ctx.lineWidth = this._getLineWidth();
var point;
if (this.from != this.to+9) {
if (this.from != this.to) {
// draw line
this._line(ctx);
@ -11388,6 +11390,50 @@ var physicsMixin = {
},
/**
* This loads the node force solver based on the barnes hut or repulsion algorithm
*
* @private
*/
_loadSelectedForceSolver : function() {
// this overloads the this._calculateNodeForces
if (this.constants.physics.barnesHut.enabled == true) {
this._clearMixin(repulsionMixin);
this._clearMixin(hierarchalRepulsionMixin);
this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
this.constants.physics.damping = this.constants.physics.barnesHut.damping;
this._loadMixin(barnesHutMixin);
}
else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
this._clearMixin(barnesHutMixin);
this._clearMixin(repulsionMixin);
this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
this._loadMixin(hierarchalRepulsionMixin);
}
else {
this._clearMixin(barnesHutMixin);
this._clearMixin(hierarchalRepulsionMixin);
this.barnesHutTree = undefined;
this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
this.constants.physics.damping = this.constants.physics.repulsion.damping;
this._loadMixin(repulsionMixin);
}
},
/**
* Before calculating the forces, we check if we need to cluster to keep up performance and we check
* if there is more than one node. If it is just one node, we dont calculate anything.
@ -11526,7 +11572,7 @@ var physicsMixin = {
if (edge.connected) {
// only calculate forces if nodes are in the same sector
if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
edgeLength = edge.length;
edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
// this implies that the edges between big clusters are longer
edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
@ -11575,7 +11621,7 @@ var physicsMixin = {
var node2 = edge.via;
var node3 = edge.from;
edgeLength = edge.length;
edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
@ -11608,6 +11654,10 @@ var physicsMixin = {
springForce = this.constants.physics.springConstant * (edgeLength - length) / length;
if (length == 0) {
length = 0.01;
}
fx = dx * springForce;
fy = dy * springForce;
@ -11615,8 +11665,242 @@ var physicsMixin = {
node1.fy += fy;
node2.fx -= fx;
node2.fy -= fy;
},
/**
* Load the HTML for the physics config and bind it
* @private
*/
_loadPhysicsConfiguration : function() {
if (this.physicsConfiguration === undefined) {
this.physicsConfiguration = document.createElement('div');
this.physicsConfiguration.className = "PhysicsConfiguration";
this.physicsConfiguration.innerHTML = '' +
'<table><tr><td><b>Simulation Mode:</b></td></tr>' +
'<tr>' +
'<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod1" value="BH" checked="checked">Barnes Hut</td>' +
'<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod2" value="R">Repulsion</td>'+
'<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod3" value="H">Hierarchical</td>' +
'</tr>'+
'</table>' +
'<table id="graph_BH_table" style="display:none">'+
'<tr><td><b>Barnes Hut</b></td></tr>'+
'<tr>'+
'<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="500" max="20000" value="2000" step="25" style="width:300px" id="graph_BH_gc"></td><td width="50px">-20000</td><td><input value="-2000" id="graph_BH_gc_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0.3" step="0.05" style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="0.03" id="graph_BH_cg_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="100" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="100" id="graph_BH_sl_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.05" step="0.005" style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="0.05" id="graph_BH_sc_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="0.09" id="graph_BH_damp_value" style="width:60px"></td>'+
'</tr>'+
'</table>'+
'<table id="graph_R_table" style="display:none">'+
'<tr><td><b>Repulsion</b></td></tr>'+
'<tr>'+
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="100" step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="100" id="graph_R_nd_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0.1" step="0.05" style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="0.01" id="graph_R_cg_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="200" step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="200" id="graph_R_sl_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.05" step="0.005" style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="0.05" id="graph_R_sc_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09" step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="0.09" id="graph_R_damp_value" style="width:60px"></td>'+
'</tr>'+
'</table>'+
'<table id="graph_H_table" style="display:none">'+
'<tr><td width="150"><b>Hierarchical</b></td></tr>'+
'<tr>'+
'<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="60" step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="60" id="graph_H_nd_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="0" step="0.05" style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="0" id="graph_H_cg_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="100" step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="100" id="graph_H_sl_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="0.01" step="0.005" style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="0.01" id="graph_H_sc_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="0.09" step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="0.09" id="graph_H_damp_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="0" step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="LR" id="graph_H_direction_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500" value="150" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="150" id="graph_H_levsep_value" style="width:60px"></td>'+
'</tr>'+
'<tr>'+
'<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500" value="100" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="100" id="graph_H_nspac_value" style="width:60px"></td>'+
'</tr>'+
'</table>'
this.containerElement.parentElement.insertBefore(this.physicsConfiguration,this.containerElement);
var hierarchicalLayoutDirections = ["LR","RL","UD","DU"];
var rangeElement;
rangeElement = document.getElementById('graph_BH_gc');
rangeElement.innerHTML = this.constants.physics.barnesHut.gravitationalConstant;
rangeElement.onchange = showValueOfRange.bind(this,'graph_BH_gc',-1,"physics_barnesHut_gravitationalConstant");
rangeElement = document.getElementById('graph_BH_cg');
rangeElement.innerHTML = this.constants.physics.barnesHut.centralGravity;
rangeElement.onchange = showValueOfRange.bind(this,'graph_BH_cg',1,"physics_centralGravity");
rangeElement = document.getElementById('graph_BH_sc');
rangeElement.innerHTML = this.constants.physics.barnesHut.springConstant;
rangeElement.onchange = showValueOfRange.bind(this,'graph_BH_sc',1,"physics_springConstant");
rangeElement = document.getElementById('graph_BH_sl');
rangeElement.innerHTML = this.constants.physics.barnesHut.springLength;
rangeElement.onchange = showValueOfRange.bind(this,'graph_BH_sl',1,"physics_springLength");
rangeElement = document.getElementById('graph_BH_damp');
rangeElement.innerHTML = this.constants.physics.barnesHut.damping;
rangeElement.onchange = showValueOfRange.bind(this,'graph_BH_damp',1,"physics_damping");
rangeElement = document.getElementById('graph_R_nd');
rangeElement.innerHTML = this.constants.physics.repulsion.nodeDistance;
rangeElement.onchange = showValueOfRange.bind(this,'graph_R_nd',1,"physics_repulsion_nodeDistance");
rangeElement = document.getElementById('graph_R_cg');
rangeElement.innerHTML = this.constants.physics.repulsion.centralGravity;
rangeElement.onchange = showValueOfRange.bind(this,'graph_R_cg',1,"physics_centralGravity");
rangeElement = document.getElementById('graph_R_sc');
rangeElement.innerHTML = this.constants.physics.repulsion.springConstant;
rangeElement.onchange = showValueOfRange.bind(this,'graph_R_sc',1,"physics_springConstant");
rangeElement = document.getElementById('graph_R_sl');
rangeElement.innerHTML = this.constants.physics.repulsion.springLength;
rangeElement.onchange = showValueOfRange.bind(this,'graph_R_sl',1,"physics_springLength");
rangeElement = document.getElementById('graph_R_damp');
rangeElement.innerHTML = this.constants.physics.repulsion.damping;
rangeElement.onchange = showValueOfRange.bind(this,'graph_R_damp',1,"physics_damping");
rangeElement = document.getElementById('graph_H_nd');
rangeElement.innerHTML = this.constants.physics.hierarchicalRepulsion.nodeDistance;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_nd',1,"physics_hierarchicalRepulsion_nodeDistance");
rangeElement = document.getElementById('graph_H_cg');
rangeElement.innerHTML = this.constants.physics.hierarchicalRepulsion.centralGravity;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_cg',1,"physics_centralGravity");
rangeElement = document.getElementById('graph_H_sc');
rangeElement.innerHTML = this.constants.physics.hierarchicalRepulsion.springConstant;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_sc',1,"physics_springConstant");
rangeElement = document.getElementById('graph_H_sl');
rangeElement.innerHTML = this.constants.physics.hierarchicalRepulsion.springLength;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_sl',1,"physics_springLength");
rangeElement = document.getElementById('graph_H_damp');
rangeElement.innerHTML = this.constants.physics.hierarchicalRepulsion.damping;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_damp',1,"physics_damping");
rangeElement = document.getElementById('graph_H_direction');
rangeElement.innerHTML = hierarchicalLayoutDirections.indexOf(this.constants.hierarchicalLayout.direction);
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_direction',hierarchicalLayoutDirections,"hierarchicalLayout_direction");
rangeElement = document.getElementById('graph_H_levsep');
rangeElement.innerHTML = this.constants.hierarchicalLayout.levelSeparation;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_levsep',1,"hierarchicalLayout_levelSeparation");
rangeElement = document.getElementById('graph_H_nspac');
rangeElement.innerHTML = this.constants.hierarchicalLayout.nodeSpacing;
rangeElement.onchange = showValueOfRange.bind(this,'graph_H_nspac',1,"hierarchicalLayout_nodeSpacing");
var radioButton1 = document.getElementById("graph_physicsMethod1");
var radioButton2 = document.getElementById("graph_physicsMethod2");
var radioButton3 = document.getElementById("graph_physicsMethod3");
radioButton2.checked = true;
if (this.constants.physics.barnesHut.enabled) {
radioButton1.checked = true;
}
if (this.constants.hierarchicalLayout.enabled) {
radioButton3.checked = true;
}
switchConfigurations.apply(this);
radioButton1.onchange = switchConfigurations.bind(this);
radioButton2.onchange = switchConfigurations.bind(this);
radioButton3.onchange = switchConfigurations.bind(this);
}
},
_overWriteGraphConstants : function(constantsVariableName, value) {
var nameArray = constantsVariableName.split("_");
if (nameArray.length == 1) {
this.constants[nameArray[0]] = value;
}
else if (nameArray.length == 2) {
this.constants[nameArray[0]][nameArray[1]] = value;
}
else if (nameArray.length == 3) {
this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
}
}
}
function switchConfigurations () {
var ids = ["graph_BH_table","graph_R_table","graph_H_table"]
var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
var tableId = "graph_" + radioButton + "_table";
var table = document.getElementById(tableId);
table.style.display = "block";
for (var i = 0; i < ids.length; i++) {
if (ids[i] != tableId) {
table = document.getElementById(ids[i]);
table.style.display = "none";
}
}
this._restoreNodes();
if (radioButton == "R") {
this.constants.hierarchicalLayout.enabled = false;
this.constants.physics.hierarchicalRepulsion.enabeled = false;
this.constants.physics.barnesHut.enabled = false;
}
else if (radioButton == "H") {
this.constants.hierarchicalLayout.enabled = true;
this.constants.physics.hierarchicalRepulsion.enabeled = true;
this.constants.physics.barnesHut.enabled = false;
this._setupHierarchicalLayout();
}
else {
this.constants.hierarchicalLayout.enabled = false;
this.constants.physics.hierarchicalRepulsion.enabeled = false;
this.constants.physics.barnesHut.enabled = true;
}
this._loadSelectedForceSolver();
this.moving = true;
this.start();
}
function showValueOfRange (id,map,constantsVariableName) {
var valueId = id + "_value";
var rangeValue = document.getElementById(id).value;
if (constantsVariableName == "hierarchicalLayout_direction" ||
constantsVariableName == "hierarchicalLayout_levelSeparation" ||
constantsVariableName == "hierarchicalLayout_nodeSpacing") {
this._setupHierarchicalLayout();
}
if (map instanceof Array) {
document.getElementById(valueId).value = map[parseInt(rangeValue)];
this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
}
else {
document.getElementById(valueId).value = map * parseFloat(rangeValue);
this._overWriteGraphConstants(constantsVariableName,map * parseFloat(rangeValue));
}
this.moving = true;
this.start();
};
/**
* Created by Alex on 2/10/14.
*/
@ -11643,7 +11927,7 @@ var hierarchalRepulsionMixin = {
// repulsing forces between nodes
var nodeDistance = this.constants.physics.repulsion.nodeDistance;
var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
var minimumDistance = nodeDistance;
// we loop from i over all but the last entree in the array
@ -12131,7 +12415,9 @@ var HierarchicalLayoutMixin = {
*/
_setupHierarchicalLayout : function() {
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.
var hubsize = 0;
var node, nodeId;
@ -12156,7 +12442,7 @@ var HierarchicalLayoutMixin = {
// if the user defined some levels but not all, alert and run without hierarchical layout
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.")
this.zoomToFit(true,this.constants.clustering.enabled);
this.zoomExtent(true,this.constants.clustering.enabled);
if (!this.constants.clustering.enabled) {
this.start();
}
@ -12195,33 +12481,28 @@ var HierarchicalLayoutMixin = {
for (nodeId in distribution[0].nodes) {
if (distribution[0].nodes.hasOwnProperty(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();
// 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 +12523,12 @@ var HierarchicalLayoutMixin = {
node = this.nodes[nodeId];
node.xFixed = 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)) {
distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
}
@ -12345,9 +12631,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 (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;
if (childNode.edges.length > 1) {
this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
@ -12381,7 +12681,24 @@ var HierarchicalLayoutMixin = {
}
}
}
},
/**
* Unfix nodes
*
* @private
*/
_restoreNodes : function() {
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
this.nodes[nodeId].xFixed = false;
this.nodes[nodeId].yFixed = false;
}
}
}
};
/**
* Created by Alex on 2/4/14.
@ -14914,6 +15231,7 @@ var SelectionMixin = {
this._unselectAll();
}
}
this.emit("click", this.getSelection());
this._redraw();
},
@ -14932,6 +15250,7 @@ var SelectionMixin = {
"y" : this._canvasToY(pointer.y)};
this.openCluster(node);
}
this.emit("doubleClick", this.getSelection());
},
@ -15095,7 +15414,7 @@ var NavigationMixin = {
this.navigationDivs = {};
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'].id = "graph-navigation_wrapper";
@ -15286,51 +15605,12 @@ var graphMixinLoaders = {
_loadPhysicsSystem : function() {
this._loadMixin(physicsMixin);
this._loadSelectedForceSolver();
},
/**
* This loads the node force solver based on the barnes hut or repulsion algorithm
*
* @private
*/
_loadSelectedForceSolver : function() {
// this overloads the this._calculateNodeForces
if (this.constants.physics.barnesHut.enabled == true) {
this._clearMixin(repulsionMixin);
this._clearMixin(hierarchalRepulsionMixin);
this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
this.constants.physics.damping = this.constants.physics.barnesHut.damping;
this._loadMixin(barnesHutMixin);
if (this.constants.configurePhysics == true) {
this._loadPhysicsConfiguration();
}
else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
this._clearMixin(barnesHutMixin);
this._clearMixin(repulsionMixin);
this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
this._loadMixin(hierarchalRepulsionMixin);
}
else {
this._clearMixin(barnesHutMixin);
this._clearMixin(hierarchalRepulsionMixin);
this.barnesHutTree = undefined;
},
this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
this.constants.physics.damping = this.constants.physics.repulsion.damping;
this._loadMixin(repulsionMixin);
}
},
/**
@ -15557,6 +15837,7 @@ function Graph (container, data, options) {
altLength: undefined
}
},
configurePhysics:false,
physics: {
barnesHut: {
enabled: true,
@ -15622,7 +15903,8 @@ function Graph (container, data, options) {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD" // UD, DU, LR, RL
},
smoothCurves: true,
maxVelocity: 10,
@ -15727,10 +16009,11 @@ function Graph (container, data, options) {
}
else {
// 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 (this.constants.clustering.enabled) {
this.startWithClustering();
@ -15773,10 +16056,10 @@ Graph.prototype._getRange = function() {
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(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};
@ -15816,10 +16099,13 @@ Graph.prototype._centerGraph = function(range) {
*
* @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) {
initialZoom = false;
}
if (disableStart === undefined) {
disableStart = false;
}
var range = this._getRange();
var zoomLevel;
@ -15844,6 +16130,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.
}
}
// correct for larger canvasses.
var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
zoomLevel *= factor;
}
else {
var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
@ -15859,10 +16149,12 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 1.0;
}
this.pinch.mousewheelScale = zoomLevel;
this._setScale(zoomLevel);
this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
if (disableStart == false) {
this.moving = true;
this.start();
}
@ -15944,6 +16236,7 @@ Graph.prototype.setOptions = function (options) {
if (options.stabilize !== undefined) {this.stabilize = options.stabilize;}
if (options.selectable !== undefined) {this.selectable = options.selectable;}
if (options.smoothCurves !== undefined) {this.constants.smoothCurves = options.smoothCurves;}
if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
if (options.onAdd) {
this.triggerFunctions.add = options.onAdd;
@ -16394,7 +16687,6 @@ Graph.prototype._onTap = function (event) {
Graph.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer);
};
@ -16658,7 +16950,7 @@ Graph.prototype.setSize = function(width, height) {
this.manipulationDiv.style.width = this.frame.canvas.clientWidth;
}
this.emit('frameResize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
};
/**
@ -17181,7 +17473,7 @@ Graph.prototype._doStabilize = function() {
count++;
}
this.zoomToFit(false,true);
this.zoomExtent(false,true);
};
@ -17409,12 +17701,6 @@ Graph.prototype._initializeMixinLoaders = function () {
/**
* vis.js module exports
*/

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


+ 74
- 10
docs/graph.html View File

@ -55,7 +55,7 @@
<li><a href="#Edges_configuration">Edges</a></li>
<li><a href="#Groups_configuration">Groups</a></li>
<li><a href="#Physics">Physics</a></li>
<li><a href="#Data_manipulation">Data_manipulation</a></li>
<li><a href="#Data_manipulation">Data manipulation</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Navigation_controls">Navigation controls</a></li>
<li><a href="#Keyboard_navigation">Keyboard navigation</a></li>
@ -298,7 +298,8 @@ var nodes = [
<td>true</td>
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.</td>
The same holds for y. If both x and y have been defined, the node will not move.
If no x or y have been supplied, this argument will not do anything.</td>
</tr>
<tr>
<td>fontColor</td>
@ -668,6 +669,15 @@ var options = {
Barnes-Hut nBody simulation is used by default. See section <a href="#Physics">Physics</a> for an overview of the available options.
</td>
</tr>
<tr>
<td><a href="#Physics">configurePhysics</a></td>
<td>Boolean</td>
<td>false</td>
<td>
Enabling this setting will create a physics configuration div above the graph. You can use this to fine tune the physics system to suit your needs.
Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset.
</td>
</tr>
<tr>
<td><a href="#Data_manipulation">dataManipulation</a></td>
@ -850,7 +860,8 @@ var options = {
<td>false</td>
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.</td>
The same holds for y. If both x and y have been defined, the node will not move.
If no x or y have been supplied, this argument will not do anything.</td>
</tr>
<tr>
@ -1173,7 +1184,7 @@ var nodes = [
The original simulation method was based on particel physics with a repulsion field (potential) around each node,
and the edges were modelled as springs. The new system employed the <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut</a> gravitational simulation model. The edges are still modelled as springs.
To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option.
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named physics.
@ -1388,12 +1399,12 @@ var options: {
};
</pre>
<p>
Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called frameResize.
Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called resize.
A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly.
An code snippet from example 21 is shown below.
</p>
<pre class="prettyprint">
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
graph.on("resize", function(params) {console.log(params.width,params.height)});
</pre>
<h3 id="Clustering">Clustering</h3>
@ -1663,12 +1674,20 @@ var options: {
hierarchicalLayout: true
}
// advanced configuration for keyboard controls
// advanced configuration for hierarchical layout
var options: {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD"
}
}
// partial configuration automatically sets enabled to true
var options: {
hierarchicalLayout: {
nodeSpacing: 100,
direction: "UD"
}
}
</pre>
@ -1692,13 +1711,21 @@ var options: {
<td>levelSeparation</td>
<td>Number</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>
<td>nodeSpacing</td>
<td>Number</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).
This is only relevant during the initial placing of nodes.</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>
</table>
<h2 id="Methods">Methods</h2>
@ -1778,6 +1805,12 @@ var options: {
or in percentages.</td>
</tr>
<tr>
<td>zoomExtent</td>
<td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
</tr>
</table>
<h2 id="Events">Events</h2>
@ -1834,9 +1867,40 @@ graph.off('select', onSelect);
<td>
<ul>
<li><code>nodes</code>: an array with the ids of the selected nodes</li>
<li><code>edges</code>: an array with the ids of the selected edges</li>
</ul>
</td>
</tr>
<tr>
<td>click</td>
<td>Fired after the user clicks or taps on a touchscreen.</td>
<td>
<ul>
<li><code>nodes</code>: an array with the ids of the selected nodes</li>
<li><code>edges</code>: an array with the ids of the selected edges</li>
</ul>
</td>
</tr>
<tr>
<td>doubleClick</td>
<td>Fired after the user double clicks or double taps on a touchscreen.</td>
<td>
<ul>
<li><code>nodes</code>: an array with the ids of the selected nodes</li>
<li><code>edges</code>: an array with the ids of the selected edges</li>
</ul>
</td>
</tr>
<tr>
<td>resize</td>
<td>Fired when the size of the canvas has been updated (not neccecarily changed) by the setSize() function or by the setOptions() function.</td>
<td>
<ul>
<li><code>width</code>: the new width of the canvas</li>
<li><code>height</code>: the new height of the canvas</li>
</ul>
</td>
</tr>
</table>

BIN
download/vis.zip View File


+ 3
- 12
examples/graph/02_random_nodes.html View File

@ -75,21 +75,11 @@
nodes: nodes,
edges: edges
};
/*
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
*/
var options = {
edges: {
},
stabilize: false
stabilize: false,
};
graph = new vis.Graph(container, data, options);
@ -107,6 +97,7 @@
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>
<div id="mygraph"></div>

+ 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">Zoom in</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>
</table>
<br />

+ 12
- 1
examples/graph/21_data_manipulation.html View File

@ -146,6 +146,17 @@
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
},
onConnect: function(data,callback) {
if (data.from == data.to) {
var r=confirm("Do you want to connect the node to itself?");
if (r==true) {
callback(data);
}
}
else {
callback(data);
}
}
};
graph = new vis.Graph(container, data, options);
@ -155,7 +166,7 @@
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
graph.on("resize", function(params) {console.log(params.width,params.height)});
function clearPopUp() {
var saveButton = document.getElementById('saveButton');

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

@ -17,341 +17,341 @@
function draw() {
// create some 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
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
@ -363,6 +363,7 @@
};
var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>

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

@ -21,6 +21,8 @@
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
@ -75,12 +77,14 @@
nodes: nodes,
edges: edges
};
var directionInput = document.getElementById("direction");
var options = {
edges: {
},
stabilize: false,
hierarchicalLayout:true
hierarchicalLayout: {
direction: directionInput.value
}
};
graph = new vis.Graph(container, data, options);
@ -89,6 +93,7 @@
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
@ -104,6 +109,35 @@
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</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>
<div id="mygraph"></div>

+ 110
- 0
examples/graph/25_physics_configuration.html View File

@ -0,0 +1,110 @@
<!doctype html>
<html>
<head>
<title>Graph | Playing with Physics</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 60;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
},
stabilize: false,
configurePhysics:true
};
graph = new vis.Graph(container, data, options);
// add event listeners
graph.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
<body onload="draw();">
<h2>Playing with Physics</h2>
<div style="width: 700px; font-size:14px;">
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
settings you are happy with, you can supply them to graph using the documented physics options.
On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
</div>
<br />
<div id="mygraph"></div>
<p id="selection"></p>
</body>
</html>

+ 1
- 0
examples/graph/index.html View File

@ -36,6 +36,7 @@
<p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
<p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
<p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
<p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>

+ 0
- 1
examples/timeline/03_much_data.html View File

@ -63,7 +63,6 @@
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

BIN
img/gallery/graph/25_physics_configuration.png View File

Before After
Width: 92  |  Height: 92  |  Size: 5.9 KiB

+ 1
- 1
index.html View File

@ -73,7 +73,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">0.5.1</span>)
(version <span class="version">0.6.0</span>)
<h2 id="example">Example</h2>

Write Preview
Loading…
Cancel
Save