Browse Source

refactor: graph --> network

css_transitions
Alex de Mulder 10 years ago
parent
commit
d65fbafcd7
140 changed files with 544 additions and 547 deletions
  1. +22
    -22
      Jakefile.js
  2. +0
    -0
      dist/img/network/acceptDeleteIcon.png
  3. +0
    -0
      dist/img/network/addNodeIcon.png
  4. +0
    -0
      dist/img/network/backIcon.png
  5. +0
    -0
      dist/img/network/connectIcon.png
  6. +0
    -0
      dist/img/network/cross.png
  7. +0
    -0
      dist/img/network/cross2.png
  8. +0
    -0
      dist/img/network/deleteIcon.png
  9. +0
    -0
      dist/img/network/downArrow.png
  10. +0
    -0
      dist/img/network/editIcon.png
  11. +0
    -0
      dist/img/network/leftArrow.png
  12. +0
    -0
      dist/img/network/minus.png
  13. +0
    -0
      dist/img/network/plus.png
  14. +0
    -0
      dist/img/network/rightArrow.png
  15. +0
    -0
      dist/img/network/upArrow.png
  16. +0
    -0
      dist/img/network/zoomExtends.png
  17. +13
    -13
      dist/vis.css
  18. +97
    -98
      dist/vis.js
  19. +1
    -1
      dist/vis.min.css
  20. +7
    -7
      dist/vis.min.js
  21. +2
    -2
      docs/index.html
  22. +60
    -60
      docs/network.html
  23. +6
    -6
      examples/Network/01_basic_usage.html
  24. +9
    -9
      examples/Network/02_random_nodes.html
  25. +8
    -8
      examples/Network/03_images.html
  26. +7
    -7
      examples/Network/04_shapes.html
  27. +7
    -7
      examples/Network/05_social_network.html
  28. +8
    -8
      examples/Network/06_groups.html
  29. +8
    -8
      examples/Network/07_selections.html
  30. +8
    -8
      examples/Network/08_mobile_friendly.html
  31. +7
    -7
      examples/Network/09_sizing.html
  32. +6
    -6
      examples/Network/10_multiline_text.html
  33. +7
    -7
      examples/Network/11_custom_style.html
  34. +7
    -7
      examples/Network/12_scalable_images.html
  35. +6
    -6
      examples/Network/13_dashed_lines.html
  36. +18
    -0
      examples/Network/14_dot_language.html
  37. +12
    -12
      examples/Network/15_dot_language_playground.html
  38. +8
    -8
      examples/Network/16_dynamic_data.html
  39. +11
    -11
      examples/Network/17_network_info.html
  40. +9
    -9
      examples/Network/18_fully_random_nodes_clustering.html
  41. +11
    -11
      examples/Network/19_scale_free_graph_clustering.html
  42. +16
    -16
      examples/Network/20_navigation.html
  43. +16
    -16
      examples/Network/21_data_manipulation.html
  44. +6
    -6
      examples/Network/22_les_miserables.html
  45. +11
    -11
      examples/Network/23_hierarchical_layout.html
  46. +8
    -8
      examples/Network/24_hierarchical_layout_userdefined.html
  47. +11
    -11
      examples/Network/25_physics_configuration.html
  48. +0
    -0
      examples/Network/graphviz/data/fsm.gv.txt
  49. +0
    -0
      examples/Network/graphviz/data/hello.gv.txt
  50. +0
    -0
      examples/Network/graphviz/data/process.gv.txt
  51. +0
    -0
      examples/Network/graphviz/data/siblings.gv.txt
  52. +0
    -0
      examples/Network/graphviz/data/softmaint.gv.txt
  53. +0
    -0
      examples/Network/graphviz/data/traffic_lights.gv.txt
  54. +0
    -0
      examples/Network/graphviz/data/transparency.gv.txt
  55. +0
    -0
      examples/Network/graphviz/data/twopi2.gv.txt
  56. +0
    -0
      examples/Network/graphviz/data/unix.gv.txt
  57. +0
    -0
      examples/Network/graphviz/data/world.gv.txt
  58. +1
    -1
      examples/Network/graphviz/graphviz_gallery.html
  59. +0
    -0
      examples/Network/graphviz/screenshots/fsm.png
  60. +0
    -0
      examples/Network/graphviz/screenshots/hello.png
  61. +0
    -0
      examples/Network/graphviz/screenshots/softmaint.png
  62. +0
    -0
      examples/Network/graphviz/screenshots/traffic_lights.png
  63. +0
    -0
      examples/Network/img/refresh-cl/Hardware-Fax-icon.png
  64. +0
    -0
      examples/Network/img/refresh-cl/Hardware-Laptop-1-icon.png
  65. +0
    -0
      examples/Network/img/refresh-cl/Hardware-Mobile-Phone-icon.png
  66. +0
    -0
      examples/Network/img/refresh-cl/Hardware-My-Computer-3-icon.png
  67. +0
    -0
      examples/Network/img/refresh-cl/Hardware-My-PDA-02-icon.png
  68. +0
    -0
      examples/Network/img/refresh-cl/Hardware-My-PDA-04-icon.png
  69. +0
    -0
      examples/Network/img/refresh-cl/Hardware-My-PDA-05-icon.png
  70. +0
    -0
      examples/Network/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
  71. +0
    -0
      examples/Network/img/refresh-cl/Hardware-Printer-Blue-icon.png
  72. +0
    -0
      examples/Network/img/refresh-cl/Misc-Scanner-default-icon.png
  73. +0
    -0
      examples/Network/img/refresh-cl/Network-Drive-icon.png
  74. +0
    -0
      examples/Network/img/refresh-cl/Network-Internet-Connection-icon.png
  75. +0
    -0
      examples/Network/img/refresh-cl/Network-Pipe-icon.png
  76. +0
    -0
      examples/Network/img/refresh-cl/System-Firewall-2-icon.png
  77. +0
    -0
      examples/Network/img/refresh-cl/System-Globe-icon.png
  78. +0
    -0
      examples/Network/img/refresh-cl/license.txt
  79. +0
    -0
      examples/Network/img/soft-scraps-icons/Document-icon24.png
  80. +0
    -0
      examples/Network/img/soft-scraps-icons/Document-icon32.png
  81. +0
    -0
      examples/Network/img/soft-scraps-icons/Document-icon48.png
  82. +0
    -0
      examples/Network/img/soft-scraps-icons/Email-icon24.png
  83. +0
    -0
      examples/Network/img/soft-scraps-icons/Email-icon32.png
  84. +0
    -0
      examples/Network/img/soft-scraps-icons/Email-icon48.png
  85. +0
    -0
      examples/Network/img/soft-scraps-icons/Folder-icon24.png
  86. +0
    -0
      examples/Network/img/soft-scraps-icons/Folder-icon32.png
  87. +0
    -0
      examples/Network/img/soft-scraps-icons/Folder-icon48.png
  88. +0
    -0
      examples/Network/img/soft-scraps-icons/Folder-icon64.png
  89. +0
    -0
      examples/Network/img/soft-scraps-icons/Smiley-Angry-icon.png
  90. +0
    -0
      examples/Network/img/soft-scraps-icons/Smiley-Grin-icon.png
  91. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Administrator-Blue-icon.png
  92. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Administrator-Green-icon.png
  93. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Coat-Blue-icon.png
  94. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Coat-Green-icon.png
  95. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Coat-Red-icon.png
  96. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Executive-Green-icon.png
  97. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Preppy-Blue-icon.png
  98. +0
    -0
      examples/Network/img/soft-scraps-icons/User-Preppy-Red-icon.png
  99. +0
    -0
      examples/Network/img/soft-scraps-icons/license.txt
  100. +2
    -2
      examples/Network/index.html

+ 22
- 22
Jakefile.js View File

@ -49,8 +49,8 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/dataaxis.css',
'./src/timeline/component/css/pathStyles.css',
'./src/graph/css/graph-manipulation.css',
'./src/graph/css/graph-navigation.css'
'./src/network/css/network-manipulation.css',
'./src/network/css/network-navigation.css'
],
dest: VIS_CSS,
separator: '\n'
@ -88,25 +88,25 @@ task('build', {async: true}, function () {
'./src/timeline/Timeline.js',
'./src/timeline/Graph2d.js',
'./src/graph/dotparser.js',
'./src/graph/shapes.js',
'./src/graph/Node.js',
'./src/graph/Edge.js',
'./src/graph/Popup.js',
'./src/graph/Groups.js',
'./src/graph/Images.js',
'./src/graph/graphMixins/physics/PhysicsMixin.js',
'./src/graph/graphMixins/physics/HierarchialRepulsion.js',
'./src/graph/graphMixins/physics/BarnesHut.js',
'./src/graph/graphMixins/physics/Repulsion.js',
'./src/graph/graphMixins/HierarchicalLayoutMixin.js',
'./src/graph/graphMixins/ManipulationMixin.js',
'./src/graph/graphMixins/SectorsMixin.js',
'./src/graph/graphMixins/ClusterMixin.js',
'./src/graph/graphMixins/SelectionMixin.js',
'./src/graph/graphMixins/NavigationMixin.js',
'./src/graph/graphMixins/MixinLoader.js',
'./src/graph/Graph.js',
'./src/network/dotparser.js',
'./src/network/shapes.js',
'./src/network/Node.js',
'./src/network/Edge.js',
'./src/network/Popup.js',
'./src/network/Groups.js',
'./src/network/Images.js',
'./src/network/networkMixins/physics/PhysicsMixin.js',
'./src/network/networkMixins/physics/HierarchialRepulsion.js',
'./src/network/networkMixins/physics/BarnesHut.js',
'./src/network/networkMixins/physics/Repulsion.js',
'./src/network/networkMixins/HierarchicalLayoutMixin.js',
'./src/network/networkMixins/ManipulationMixin.js',
'./src/network/networkMixins/SectorsMixin.js',
'./src/network/networkMixins/ClusterMixin.js',
'./src/network/networkMixins/SelectionMixin.js',
'./src/network/networkMixins/NavigationMixin.js',
'./src/network/networkMixins/MixinLoader.js',
'./src/network/Network.js',
'./src/graph3d/Graph3d.js',
@ -117,7 +117,7 @@ task('build', {async: true}, function () {
});
// copy images
wrench.copyDirSyncRecursive('./src/graph/img', DIST + '/img/graph', {
wrench.copyDirSyncRecursive('./src/network/img', DIST + '/img/network', {
forceDelete: true
});
wrench.copyDirSyncRecursive('./src/timeline/img', DIST + '/img/timeline', {

dist/img/graph/acceptDeleteIcon.png → dist/img/network/acceptDeleteIcon.png View File


dist/img/graph/addNodeIcon.png → dist/img/network/addNodeIcon.png View File


dist/img/graph/backIcon.png → dist/img/network/backIcon.png View File


dist/img/graph/connectIcon.png → dist/img/network/connectIcon.png View File


dist/img/graph/cross.png → dist/img/network/cross.png View File


dist/img/graph/cross2.png → dist/img/network/cross2.png View File


dist/img/graph/deleteIcon.png → dist/img/network/deleteIcon.png View File


dist/img/graph/downArrow.png → dist/img/network/downArrow.png View File


dist/img/graph/editIcon.png → dist/img/network/editIcon.png View File


dist/img/graph/leftArrow.png → dist/img/network/leftArrow.png View File


dist/img/graph/minus.png → dist/img/network/minus.png View File


dist/img/graph/plus.png → dist/img/network/plus.png View File


dist/img/graph/rightArrow.png → dist/img/network/rightArrow.png View File


dist/img/graph/upArrow.png → dist/img/network/upArrow.png View File


dist/img/graph/zoomExtends.png → dist/img/network/zoomExtends.png View File


+ 13
- 13
dist/vis.css View File

@ -546,7 +546,7 @@ div.graph-manipulation-closeDiv {
margin-left:590px;
background-position: 0px 0px;
background-repeat:no-repeat;
background-image: url("img/graph/cross.png");
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -586,7 +586,7 @@ span.graph-manipulationUI:active {
}
span.graph-manipulationUI.back {
background-image: url("img/graph/backIcon.png");
background-image: url("img/network/backIcon.png");
}
span.graph-manipulationUI.none:hover {
@ -605,11 +605,11 @@ span.graph-manipulationUI.notification{
}
span.graph-manipulationUI.add {
background-image: url("img/graph/addNodeIcon.png");
background-image: url("img/network/addNodeIcon.png");
}
span.graph-manipulationUI.edit {
background-image: url("img/graph/editIcon.png");
background-image: url("img/network/editIcon.png");
}
span.graph-manipulationUI.edit.editmode {
@ -620,11 +620,11 @@ span.graph-manipulationUI.edit.editmode {
}
span.graph-manipulationUI.connect {
background-image: url("img/graph/connectIcon.png");
background-image: url("img/network/connectIcon.png");
}
span.graph-manipulationUI.delete {
background-image: url("img/graph/deleteIcon.png");
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.graph-manipulationLabel {
@ -670,37 +670,37 @@ div.graph-navigation.active {
}
div.graph-navigation.up {
background-image: url("img/graph/upArrow.png");
background-image: url("img/network/upArrow.png");
bottom:50px;
left:55px;
}
div.graph-navigation.down {
background-image: url("img/graph/downArrow.png");
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.graph-navigation.left {
background-image: url("img/graph/leftArrow.png");
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.graph-navigation.right {
background-image: url("img/graph/rightArrow.png");
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.graph-navigation.zoomIn {
background-image: url("img/graph/plus.png");
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.graph-navigation.zoomOut {
background-image: url("img/graph/minus.png");
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.graph-navigation.zoomExtends {
background-image: url("img/graph/zoomExtends.png");
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;
}

+ 97
- 98
dist/vis.js View File

@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version 2.0.1-SNAPSHOT
* @date 2014-07-01
* @version @@version
* @date @@date
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -12292,9 +12292,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* {string} image An image url
* {string} title An title text, can be HTML
* {anytype} group A group name or number
* @param {Graph.Images} imagelist A list with images. Only needed
* @param {Network.Images} imagelist A list with images. Only needed
* when the node has an image
* @param {Graph.Groups} grouplist A list with groups. Needed for
* @param {Network.Groups} grouplist A list with groups. Needed for
* retrieving group properties
* @param {Object} constants An object with default values for
* example for the color
@ -13252,7 +13252,7 @@ Node.prototype.updateVelocity = function(massBeforeClustering) {
* to (number), label (string, color (string),
* width (number), style (string),
* length (number), title (string)
* @param {Graph} graph A graph object, used to find and edge to
* @param {Network} graph A graph object, used to find and edge to
* nodes.
* @param {Object} constants An object with default values for
* example for the color
@ -13372,6 +13372,7 @@ Edge.prototype.setProperties = function(properties, constants) {
else {
if (properties.color.color !== undefined) {this.color.color = properties.color.color;}
if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
if (properties.color.hover !== undefined) {this.color.hover = properties.color.hover;}
}
}
@ -14232,7 +14233,7 @@ function Popup(container, x, y, text, style) {
style = text;
text = undefined;
} else {
// for backwards compatibility, in case clients other than Graph are creating Popup directly
// for backwards compatibility, in case clients other than Network are creating Popup directly
style = {
fontColor: 'black',
fontSize: 14, // px
@ -16666,7 +16667,7 @@ var manipulationMixin = {
var SectorMixin = {
/**
* This function is only called by the setData function of the Graph object.
* This function is only called by the setData function of the Network object.
* This loads the global references into the active sector. This initializes the sector.
*
* @private
@ -17018,7 +17019,7 @@ var SectorMixin = {
*
* @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
* | we dont pass the function itself because then the "this" is the window object
* | instead of the Graph object
* | instead of the Network object
* @param {*} [argument] | Optional: arguments to pass to the runFunction
* @private
*/
@ -17057,7 +17058,7 @@ var SectorMixin = {
*
* @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
* | we dont pass the function itself because then the "this" is the window object
* | instead of the Graph object
* | instead of the Network object
* @param {*} [argument] | Optional: arguments to pass to the runFunction
* @private
*/
@ -17086,7 +17087,7 @@ var SectorMixin = {
*
* @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
* | we don't pass the function itself because then the "this" is the window object
* | instead of the Graph object
* | instead of the Network object
* @param {*} [argument] | Optional: arguments to pass to the runFunction
* @private
*/
@ -17124,7 +17125,7 @@ var SectorMixin = {
*
* @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
* | we don't pass the function itself because then the "this" is the window object
* | instead of the Graph object
* | instead of the Network object
* @param {*} [argument] | Optional: arguments to pass to the runFunction
* @private
*/
@ -19280,7 +19281,7 @@ var graphMixinLoaders = {
_loadMixin: function (sourceVariable) {
for (var mixinFunction in sourceVariable) {
if (sourceVariable.hasOwnProperty(mixinFunction)) {
Graph.prototype[mixinFunction] = sourceVariable[mixinFunction];
Network.prototype[mixinFunction] = sourceVariable[mixinFunction];
}
}
},
@ -19295,7 +19296,7 @@ var graphMixinLoaders = {
_clearMixin: function (sourceVariable) {
for (var mixinFunction in sourceVariable) {
if (sourceVariable.hasOwnProperty(mixinFunction)) {
Graph.prototype[mixinFunction] = undefined;
Network.prototype[mixinFunction] = undefined;
}
}
},
@ -19465,18 +19466,18 @@ var graphMixinLoaders = {
};
/**
* @constructor Graph
* @constructor Network
* Create a graph visualization, displaying nodes and edges.
*
* @param {Element} container The DOM element in which the Graph will
* @param {Element} container The DOM element in which the Network will
* be created. Normally a div element.
* @param {Object} data An object containing parameters
* {Array} nodes
* {Array} edges
* @param {Object} options Options
*/
function Graph (container, data, options) {
if (!(this instanceof Graph)) {
function Network (container, data, options) {
if (!(this instanceof Network)) {
throw new SyntaxError('Constructor must be called with the new operator');
}
@ -19685,13 +19686,13 @@ function Graph (container, data, options) {
this._loadPhysicsSystem();
// create a frame and canvas
this._create();
// load the sector system. (mandatory, fully integrated with Graph)
// load the sector system. (mandatory, fully integrated with Network)
this._loadSectorSystem();
// load the cluster system. (mandatory, even when not using the cluster system, there are function calls to it)
this._loadClusterSystem();
// load the selection system. (mandatory, required by Graph)
// load the selection system. (mandatory, required by Network)
this._loadSelectionSystem();
// load the selection system. (mandatory, required by Graph)
// load the selection system. (mandatory, required by Network)
this._loadHierarchySystem();
// apply options
@ -19777,8 +19778,8 @@ function Graph (container, data, options) {
}
}
// Extend Graph with an Emitter mixin
Emitter(Graph.prototype);
// Extend Network with an Emitter mixin
Emitter(Network.prototype);
/**
* Get the script path where the vis.js library is located
@ -19787,7 +19788,7 @@ Emitter(Graph.prototype);
* end with a slash.
* @private
*/
Graph.prototype._getScriptPath = function() {
Network.prototype._getScriptPath = function() {
var scripts = document.getElementsByTagName( 'script' );
// find script named vis.js or vis.min.js
@ -19808,7 +19809,7 @@ Graph.prototype._getScriptPath = function() {
* Find the center position of the graph
* @private
*/
Graph.prototype._getRange = function() {
Network.prototype._getRange = function() {
var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
@ -19831,7 +19832,7 @@ Graph.prototype._getRange = function() {
* @returns {{x: number, y: number}}
* @private
*/
Graph.prototype._findCenter = function(range) {
Network.prototype._findCenter = function(range) {
return {x: (0.5 * (range.maxX + range.minX)),
y: (0.5 * (range.maxY + range.minY))};
};
@ -19842,7 +19843,7 @@ Graph.prototype._findCenter = function(range) {
*
* @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
*/
Graph.prototype._centerGraph = function(range) {
Network.prototype._centerGraph = function(range) {
var center = this._findCenter(range);
center.x *= this.scale;
@ -19860,7 +19861,7 @@ Graph.prototype._centerGraph = function(range) {
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
* @param {Boolean} [disableStart] | If true, start is not called.
*/
Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
Network.prototype.zoomExtent = function(initialZoom, disableStart) {
if (initialZoom === undefined) {
initialZoom = false;
}
@ -19924,7 +19925,7 @@ Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
* Update the this.nodeIndices with the most recent node index list
* @private
*/
Graph.prototype._updateNodeIndexList = function() {
Network.prototype._updateNodeIndexList = function() {
this._clearNodeIndexList();
for (var idx in this.nodes) {
if (this.nodes.hasOwnProperty(idx)) {
@ -19944,7 +19945,7 @@ Graph.prototype._updateNodeIndexList = function() {
* {Options} [options] Object with options
* @param {Boolean} [disableStart] | optional: disable the calling of the start function.
*/
Graph.prototype.setData = function(data, disableStart) {
Network.prototype.setData = function(data, disableStart) {
if (disableStart === undefined) {
disableStart = false;
}
@ -19990,7 +19991,7 @@ Graph.prototype.setData = function(data, disableStart) {
* @param {Object} options
* @param {Boolean} [initializeView] | set zoom and translation to default.
*/
Graph.prototype.setOptions = function (options) {
Network.prototype.setOptions = function (options) {
if (options) {
var prop;
// retrieve parameter values
@ -20233,13 +20234,13 @@ Graph.prototype.setOptions = function (options) {
};
/**
* Create the main frame for the Graph.
* This function is executed once when a Graph object is created. The frame
* Create the main frame for the Network.
* This function is executed once when a Network object is created. The frame
* contains a canvas, and this canvas contains all objects like the axis and
* nodes.
* @private
*/
Graph.prototype._create = function () {
Network.prototype._create = function () {
// remove all elements from the container element.
while (this.containerElement.hasChildNodes()) {
this.containerElement.removeChild(this.containerElement.firstChild);
@ -20292,7 +20293,7 @@ Graph.prototype._create = function () {
* Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
* @private
*/
Graph.prototype._createKeyBinds = function() {
Network.prototype._createKeyBinds = function() {
var me = this;
this.mousetrap = mousetrap;
@ -20333,7 +20334,7 @@ Graph.prototype._createKeyBinds = function() {
* @return {{x: Number, y: Number}} pointer
* @private
*/
Graph.prototype._getPointer = function (touch) {
Network.prototype._getPointer = function (touch) {
return {
x: touch.pageX - vis.util.getAbsoluteLeft(this.frame.canvas),
y: touch.pageY - vis.util.getAbsoluteTop(this.frame.canvas)
@ -20345,7 +20346,7 @@ Graph.prototype._getPointer = function (touch) {
* @param event
* @private
*/
Graph.prototype._onTouch = function (event) {
Network.prototype._onTouch = function (event) {
this.drag.pointer = this._getPointer(event.gesture.center);
this.drag.pinched = false;
this.pinch.scale = this._getScale();
@ -20357,7 +20358,7 @@ Graph.prototype._onTouch = function (event) {
* handle drag start event
* @private
*/
Graph.prototype._onDragStart = function () {
Network.prototype._onDragStart = function () {
this._handleDragStart();
};
@ -20368,7 +20369,7 @@ Graph.prototype._onDragStart = function () {
*
* @private
*/
Graph.prototype._handleDragStart = function() {
Network.prototype._handleDragStart = function() {
var drag = this.drag;
var node = this._getNodeAt(drag.pointer);
// note: drag.pointer is set in _onTouch to get the initial touch location
@ -20414,7 +20415,7 @@ Graph.prototype._handleDragStart = function() {
* handle drag event
* @private
*/
Graph.prototype._onDrag = function (event) {
Network.prototype._onDrag = function (event) {
this._handleOnDrag(event)
};
@ -20425,7 +20426,7 @@ Graph.prototype._onDrag = function (event) {
*
* @private
*/
Graph.prototype._handleOnDrag = function(event) {
Network.prototype._handleOnDrag = function(event) {
if (this.drag.pinched) {
return;
}
@ -20479,7 +20480,7 @@ Graph.prototype._handleOnDrag = function(event) {
* handle drag start event
* @private
*/
Graph.prototype._onDragEnd = function () {
Network.prototype._onDragEnd = function () {
this.drag.dragging = false;
var selection = this.drag.selection;
if (selection) {
@ -20495,7 +20496,7 @@ Graph.prototype._onDragEnd = function () {
* handle tap/click event: select/unselect a node
* @private
*/
Graph.prototype._onTap = function (event) {
Network.prototype._onTap = function (event) {
var pointer = this._getPointer(event.gesture.center);
this.pointerPosition = pointer;
this._handleTap(pointer);
@ -20507,7 +20508,7 @@ Graph.prototype._onTap = function (event) {
* handle doubletap event
* @private
*/
Graph.prototype._onDoubleTap = function (event) {
Network.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer);
};
@ -20517,7 +20518,7 @@ Graph.prototype._onDoubleTap = function (event) {
* handle long tap event: multi select nodes
* @private
*/
Graph.prototype._onHold = function (event) {
Network.prototype._onHold = function (event) {
var pointer = this._getPointer(event.gesture.center);
this.pointerPosition = pointer;
this._handleOnHold(pointer);
@ -20528,7 +20529,7 @@ Graph.prototype._onHold = function (event) {
*
* @private
*/
Graph.prototype._onRelease = function (event) {
Network.prototype._onRelease = function (event) {
var pointer = this._getPointer(event.gesture.center);
this._handleOnRelease(pointer);
};
@ -20538,7 +20539,7 @@ Graph.prototype._onRelease = function (event) {
* @param event
* @private
*/
Graph.prototype._onPinch = function (event) {
Network.prototype._onPinch = function (event) {
var pointer = this._getPointer(event.gesture.center);
this.drag.pinched = true;
@ -20558,7 +20559,7 @@ Graph.prototype._onPinch = function (event) {
* @return {Number} appliedScale scale is limited within the boundaries
* @private
*/
Graph.prototype._zoom = function(scale, pointer) {
Network.prototype._zoom = function(scale, pointer) {
if (this.constants.zoomable == true) {
var scaleOld = this._getScale();
if (scale < 0.00001) {
@ -20601,7 +20602,7 @@ Graph.prototype._zoom = function(scale, pointer) {
* @param {MouseEvent} event
* @private
*/
Graph.prototype._onMouseWheel = function(event) {
Network.prototype._onMouseWheel = function(event) {
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
@ -20643,7 +20644,7 @@ Graph.prototype._onMouseWheel = function(event) {
* @param {Event} event
* @private
*/
Graph.prototype._onMouseMoveTitle = function (event) {
Network.prototype._onMouseMoveTitle = function (event) {
var gesture = util.fakeGesture(this, event);
var pointer = this._getPointer(gesture.center);
@ -20708,7 +20709,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
* @param {{x:Number, y:Number}} pointer
* @private
*/
Graph.prototype._checkShowPopup = function (pointer) {
Network.prototype._checkShowPopup = function (pointer) {
var obj = {
left: this._XconvertDOMtoCanvas(pointer.x),
top: this._YconvertDOMtoCanvas(pointer.y),
@ -20778,7 +20779,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
* @param {{x:Number, y:Number}} pointer
* @private
*/
Graph.prototype._checkHidePopup = function (pointer) {
Network.prototype._checkHidePopup = function (pointer) {
if (!this.popupObj || !this._getNodeAt(pointer) ) {
this.popupObj = undefined;
if (this.popup) {
@ -20795,7 +20796,7 @@ Graph.prototype._checkHidePopup = function (pointer) {
* @param {string} height Height in pixels or percentage (for example '400px'
* or '30%')
*/
Graph.prototype.setSize = function(width, height) {
Network.prototype.setSize = function(width, height) {
this.frame.style.width = width;
this.frame.style.height = height;
@ -20823,7 +20824,7 @@ Graph.prototype.setSize = function(width, height) {
* @param {Array | DataSet | DataView} nodes The data containing the nodes.
* @private
*/
Graph.prototype._setNodes = function(nodes) {
Network.prototype._setNodes = function(nodes) {
var oldNodesData = this.nodesData;
if (nodes instanceof DataSet || nodes instanceof DataView) {
@ -20869,7 +20870,7 @@ Graph.prototype._setNodes = function(nodes) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._addNodes = function(ids) {
Network.prototype._addNodes = function(ids) {
var id;
for (var i = 0, len = ids.length; i < len; i++) {
id = ids[i];
@ -20901,7 +20902,7 @@ Graph.prototype._addNodes = function(ids) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._updateNodes = function(ids) {
Network.prototype._updateNodes = function(ids) {
var nodes = this.nodes,
nodesData = this.nodesData;
for (var i = 0, len = ids.length; i < len; i++) {
@ -20933,7 +20934,7 @@ Graph.prototype._updateNodes = function(ids) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._removeNodes = function(ids) {
Network.prototype._removeNodes = function(ids) {
var nodes = this.nodes;
for (var i = 0, len = ids.length; i < len; i++) {
var id = ids[i];
@ -20956,7 +20957,7 @@ Graph.prototype._removeNodes = function(ids) {
* @private
* @private
*/
Graph.prototype._setEdges = function(edges) {
Network.prototype._setEdges = function(edges) {
var oldEdgesData = this.edgesData;
if (edges instanceof DataSet || edges instanceof DataView) {
@ -21003,7 +21004,7 @@ Graph.prototype._setEdges = function(edges) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._addEdges = function (ids) {
Network.prototype._addEdges = function (ids) {
var edges = this.edges,
edgesData = this.edgesData;
@ -21034,7 +21035,7 @@ Graph.prototype._addEdges = function (ids) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._updateEdges = function (ids) {
Network.prototype._updateEdges = function (ids) {
var edges = this.edges,
edgesData = this.edgesData;
for (var i = 0, len = ids.length; i < len; i++) {
@ -21069,7 +21070,7 @@ Graph.prototype._updateEdges = function (ids) {
* @param {Number[] | String[]} ids
* @private
*/
Graph.prototype._removeEdges = function (ids) {
Network.prototype._removeEdges = function (ids) {
var edges = this.edges;
for (var i = 0, len = ids.length; i < len; i++) {
var id = ids[i];
@ -21096,7 +21097,7 @@ Graph.prototype._removeEdges = function (ids) {
* Reconnect all edges
* @private
*/
Graph.prototype._reconnectEdges = function() {
Network.prototype._reconnectEdges = function() {
var id,
nodes = this.nodes,
edges = this.edges;
@ -21124,7 +21125,7 @@ Graph.prototype._reconnectEdges = function() {
* setValueRange(min, max).
* @private
*/
Graph.prototype._updateValueRange = function(obj) {
Network.prototype._updateValueRange = function(obj) {
var id;
// determine the range of the objects
@ -21154,7 +21155,7 @@ Graph.prototype._updateValueRange = function(obj) {
* Redraw the graph with the current data
* chart will be resized too.
*/
Graph.prototype.redraw = function() {
Network.prototype.redraw = function() {
this.setSize(this.width, this.height);
this._redraw();
};
@ -21163,7 +21164,7 @@ Graph.prototype.redraw = function() {
* Redraw the graph with the current data
* @private
*/
Graph.prototype._redraw = function() {
Network.prototype._redraw = function() {
var ctx = this.frame.canvas.getContext('2d');
// clear the canvas
var w = this.frame.canvas.width;
@ -21202,7 +21203,7 @@ Graph.prototype._redraw = function() {
* @param {Number} offsetY Vertical offset
* @private
*/
Graph.prototype._setTranslation = function(offsetX, offsetY) {
Network.prototype._setTranslation = function(offsetX, offsetY) {
if (this.translation === undefined) {
this.translation = {
x: 0,
@ -21225,7 +21226,7 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
* @return {Object} translation An object with parameters x and y, both a number
* @private
*/
Graph.prototype._getTranslation = function() {
Network.prototype._getTranslation = function() {
return {
x: this.translation.x,
y: this.translation.y
@ -21237,7 +21238,7 @@ Graph.prototype._getTranslation = function() {
* @param {Number} scale Scaling factor 1.0 is unscaled
* @private
*/
Graph.prototype._setScale = function(scale) {
Network.prototype._setScale = function(scale) {
this.scale = scale;
};
@ -21246,7 +21247,7 @@ Graph.prototype._setScale = function(scale) {
* @return {Number} scale Scaling factor 1.0 is unscaled
* @private
*/
Graph.prototype._getScale = function() {
Network.prototype._getScale = function() {
return this.scale;
};
@ -21257,7 +21258,7 @@ Graph.prototype._getScale = function() {
* @returns {number}
* @private
*/
Graph.prototype._XconvertDOMtoCanvas = function(x) {
Network.prototype._XconvertDOMtoCanvas = function(x) {
return (x - this.translation.x) / this.scale;
};
@ -21268,7 +21269,7 @@ Graph.prototype._XconvertDOMtoCanvas = function(x) {
* @returns {number}
* @private
*/
Graph.prototype._XconvertCanvasToDOM = function(x) {
Network.prototype._XconvertCanvasToDOM = function(x) {
return x * this.scale + this.translation.x;
};
@ -21279,7 +21280,7 @@ Graph.prototype._XconvertCanvasToDOM = function(x) {
* @returns {number}
* @private
*/
Graph.prototype._YconvertDOMtoCanvas = function(y) {
Network.prototype._YconvertDOMtoCanvas = function(y) {
return (y - this.translation.y) / this.scale;
};
@ -21290,7 +21291,7 @@ Graph.prototype._YconvertDOMtoCanvas = function(y) {
* @returns {number}
* @private
*/
Graph.prototype._YconvertCanvasToDOM = function(y) {
Network.prototype._YconvertCanvasToDOM = function(y) {
return y * this.scale + this.translation.y ;
};
@ -21301,7 +21302,7 @@ Graph.prototype._YconvertCanvasToDOM = function(y) {
* @returns {{x: number, y: number}}
* @constructor
*/
Graph.prototype.canvasToDOM = function(pos) {
Network.prototype.canvasToDOM = function(pos) {
return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
}
@ -21311,7 +21312,7 @@ Graph.prototype.canvasToDOM = function(pos) {
* @returns {{x: number, y: number}}
* @constructor
*/
Graph.prototype.DOMtoCanvas = function(pos) {
Network.prototype.DOMtoCanvas = function(pos) {
return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
}
@ -21322,7 +21323,7 @@ Graph.prototype.DOMtoCanvas = function(pos) {
* @param {Boolean} [alwaysShow]
* @private
*/
Graph.prototype._drawNodes = function(ctx,alwaysShow) {
Network.prototype._drawNodes = function(ctx,alwaysShow) {
if (alwaysShow === undefined) {
alwaysShow = false;
}
@ -21359,7 +21360,7 @@ Graph.prototype._drawNodes = function(ctx,alwaysShow) {
* @param {CanvasRenderingContext2D} ctx
* @private
*/
Graph.prototype._drawEdges = function(ctx) {
Network.prototype._drawEdges = function(ctx) {
var edges = this.edges;
for (var id in edges) {
if (edges.hasOwnProperty(id)) {
@ -21378,7 +21379,7 @@ Graph.prototype._drawEdges = function(ctx) {
* @param {CanvasRenderingContext2D} ctx
* @private
*/
Graph.prototype._drawControlNodes = function(ctx) {
Network.prototype._drawControlNodes = function(ctx) {
var edges = this.edges;
for (var id in edges) {
if (edges.hasOwnProperty(id)) {
@ -21391,7 +21392,7 @@ Graph.prototype._drawControlNodes = function(ctx) {
* Find a stable position for all nodes
* @private
*/
Graph.prototype._stabilize = function() {
Network.prototype._stabilize = function() {
if (this.constants.freezeForStabilization == true) {
this._freezeDefinedNodes();
}
@ -21415,7 +21416,7 @@ Graph.prototype._stabilize = function() {
*
* @private
*/
Graph.prototype._freezeDefinedNodes = function() {
Network.prototype._freezeDefinedNodes = function() {
var nodes = this.nodes;
for (var id in nodes) {
if (nodes.hasOwnProperty(id)) {
@ -21434,7 +21435,7 @@ Graph.prototype._freezeDefinedNodes = function() {
*
* @private
*/
Graph.prototype._restoreFrozenNodes = function() {
Network.prototype._restoreFrozenNodes = function() {
var nodes = this.nodes;
for (var id in nodes) {
if (nodes.hasOwnProperty(id)) {
@ -21453,7 +21454,7 @@ Graph.prototype._restoreFrozenNodes = function() {
* @return {boolean} true if moving, false if non of the nodes is moving
* @private
*/
Graph.prototype._isMoving = function(vmin) {
Network.prototype._isMoving = function(vmin) {
var nodes = this.nodes;
for (var id in nodes) {
if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
@ -21470,7 +21471,7 @@ Graph.prototype._isMoving = function(vmin) {
*
* @private
*/
Graph.prototype._discreteStepNodes = function() {
Network.prototype._discreteStepNodes = function() {
var interval = this.physicsDiscreteStepsize;
var nodes = this.nodes;
var nodeId;
@ -21509,7 +21510,7 @@ Graph.prototype._discreteStepNodes = function() {
*
* @private
*/
Graph.prototype._physicsTick = function() {
Network.prototype._physicsTick = function() {
if (!this.freezeSimulation) {
if (this.moving) {
this._doInAllActiveSectors("_initializeForceCalculation");
@ -21529,7 +21530,7 @@ Graph.prototype._physicsTick = function() {
*
* @private
*/
Graph.prototype._animationStep = function() {
Network.prototype._animationStep = function() {
// reset the timer so a new scheduled animation step can be set
this.timer = undefined;
// handle the keyboad movement
@ -21543,13 +21544,11 @@ Graph.prototype._animationStep = function() {
var maxSteps = 1;
this._physicsTick();
var timeRequired = Date.now() - calculationTime;
while (timeRequired < (this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
this._physicsTick();
timeRequired = Date.now() - calculationTime;
maxSteps++;
}
// start the rendering process
var renderTime = Date.now();
this._redraw();
@ -21564,7 +21563,7 @@ if (typeof window !== 'undefined') {
/**
* Schedule a animation step with the refreshrate interval.
*/
Graph.prototype.start = function() {
Network.prototype.start = function() {
if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
if (!this.timer) {
var ua = navigator.userAgent.toLowerCase();
@ -21598,7 +21597,7 @@ Graph.prototype.start = function() {
*
* @private
*/
Graph.prototype._handleNavigation = function() {
Network.prototype._handleNavigation = function() {
if (this.xIncrement != 0 || this.yIncrement != 0) {
var translation = this._getTranslation();
this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
@ -21616,7 +21615,7 @@ Graph.prototype._handleNavigation = function() {
/**
* Freeze the _animationStep
*/
Graph.prototype.toggleFreeze = function() {
Network.prototype.toggleFreeze = function() {
if (this.freezeSimulation == false) {
this.freezeSimulation = true;
}
@ -21633,7 +21632,7 @@ Graph.prototype.toggleFreeze = function() {
* @param {boolean} [disableStart]
* @private
*/
Graph.prototype._configureSmoothCurves = function(disableStart) {
Network.prototype._configureSmoothCurves = function(disableStart) {
if (disableStart === undefined) {
disableStart = true;
}
@ -21665,7 +21664,7 @@ Graph.prototype._configureSmoothCurves = function(disableStart) {
*
* @private
*/
Graph.prototype._createBezierNodes = function() {
Network.prototype._createBezierNodes = function() {
if (this.constants.smoothCurves == true) {
for (var edgeId in this.edges) {
if (this.edges.hasOwnProperty(edgeId)) {
@ -21694,10 +21693,10 @@ Graph.prototype._createBezierNodes = function() {
*
* @private
*/
Graph.prototype._initializeMixinLoaders = function () {
Network.prototype._initializeMixinLoaders = function () {
for (var mixinFunction in graphMixinLoaders) {
if (graphMixinLoaders.hasOwnProperty(mixinFunction)) {
Graph.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
Network.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
}
}
};
@ -21705,7 +21704,7 @@ Graph.prototype._initializeMixinLoaders = function () {
/**
* Load the XY positions of the nodes into the dataset.
*/
Graph.prototype.storePosition = function() {
Network.prototype.storePosition = function() {
var dataArray = [];
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
@ -21727,7 +21726,7 @@ Graph.prototype.storePosition = function() {
* @param {Number} nodeId
* @param {Number} [zoomLevel]
*/
Graph.prototype.focusOnNode = function (nodeId, zoomLevel) {
Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
if (this.nodes.hasOwnProperty(nodeId)) {
if (zoomLevel === undefined) {
zoomLevel = this._getScale();
@ -24318,7 +24317,7 @@ Point2d = function (x, y) {
*
* @param {DataSet} data The google data table
* @param {Number} column The index of the column to be filtered
* @param {Graph} graph The graph
* @param {Network} graph The graph
*/
function Filter (data, column, graph) {
this.data = data;
@ -25107,7 +25106,7 @@ var vis = {
},
Timeline: Timeline,
Graph: Graph,
Network: Network,
Graph3d: Graph3d,
Graph2d: Graph2d
};

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


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


+ 2
- 2
docs/index.html View File

@ -53,8 +53,8 @@
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
<a href="network.html"><b>Network</b></a>.
Display a network (force directed graph) with nodes and edges (previously called Graph).
</li>
<li>
<a href="graph2d.html"><b>Graph2d</b></a>.

docs/graph.html → docs/network.html View File

@ -2,7 +2,7 @@
<html>
<head>
<title>vis.js | graph documentation</title>
<title>vis.js | network documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
@ -17,21 +17,21 @@
<h2 id="Overview">Overview</h2>
<p>
Graph is a visualization to display graphs and networks consisting of nodes
Graph is a visualization to display networks and networks consisting of nodes
and edges. The visualization is easy to use and supports custom shapes,
styles, colors, sizes, images, and more.
</p>
<p>
The graph visualization works smooth on any modern browser for up to a
The network visualization works smooth on any modern browser for up to a
few thousand nodes and edges. To handle a larger amount of nodes, Graph
has <a href="#Clustering">clustering</a> support.
</p>
<p>
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
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
that the user can use to explore which settings may be good for you. Use configurePhysics as described in the <u><a href="#PhysicsConfiguration">Physics</a></u> section or by
<u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.
<u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.
</p>
<p>
@ -77,7 +77,7 @@
<h2 id="Example">Example</h2>
<p>
Here a basic graph example. Note that unlike the
Here a basic network example. Note that unlike the
<a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
file.
</p>
@ -97,7 +97,7 @@
&lt;body&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;div id="mynetwork"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// create an array with nodes
@ -117,8 +117,8 @@
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: nodes,
edges: edges,
@ -127,7 +127,7 @@
width: '400px',
height: '400px'
};
var graph = new vis.Graph(container, data, options);
var network = new vis.Graph(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
@ -147,12 +147,12 @@
The constructor of the Graph is <code>vis.Graph</code>.
<pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
<pre class="prettyprint lang-js">var network = new vis.Graph(container, data, options);</pre>
The constructor accepts three parameters:
<ul>
<li>
<code>container</code> is the DOM element in which to create the graph.
<code>container</code> is the DOM element in which to create the network.
</li>
<li>
<code>data</code> is an Object containing properties <code>nodes</code> and
@ -207,7 +207,7 @@ var data = {
<li>
<span style="font-weight: bold;">A property <code>options</code></span>,
containing an object with global options.
Options can be provided as third parameter in the graph constructor
Options can be provided as third parameter in the network constructor
as well. Section <a href="#Configuration_Options">Configuration Options</a>
describes the available options.
@ -246,7 +246,7 @@ nodes.add([
// ... more nodes
]);
</pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
When using a DataSet, the network is automatically updating to changes in the DataSet.
<p>
Nodes support the following properties:
@ -514,7 +514,7 @@ edges.add([
// ... more edges
]);
</pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
When using a DataSet, the network is automatically updating to changes in the DataSet.
<p>
Edges support the following properties:
@ -727,11 +727,11 @@ When using a DataSet, the graph is automatically updating to changes in the Data
<pre class="prettyprint lang-js">
// provide data in the DOT language
var data = {
dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
dot: 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
// create a graph
var graph = new vis.Graph(container, data);
// create a network
var network = new vis.Graph(container, data);
</pre>
@ -739,7 +739,7 @@ var graph = new vis.Graph(container, data);
<h2 id="Configuration_options">Configuration options</h2>
<p>
Options can be used to customize the graph. Options are defined as a JSON object.
Options can be used to customize the network. Options are defined as a JSON object.
All options are optional.
</p>
@ -780,7 +780,7 @@ var options = {
<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.
Enabling this setting will create a physics configuration div above the network. 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>
@ -818,7 +818,7 @@ var options = {
<td>false</td>
<td>
With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
to speed up the initialization of the graph by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
</td>
</tr>
@ -838,7 +838,7 @@ var options = {
<td>height</td>
<td>String</td>
<td>"400px"</td>
<td>The height of the graph in pixels or as a percentage.</td>
<td>The height of the network in pixels or as a percentage.</td>
</tr>
<tr>
@ -861,7 +861,7 @@ var options = {
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the graph can be dragged. This will not affect the dragging of nodes.
Toggle if the network can be dragged. This will not affect the dragging of nodes.
</td>
</tr>
<tr>
@ -869,7 +869,7 @@ var options = {
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the nodes can be dragged. This will not affect the dragging of the graph.
Toggle if the nodes can be dragged. This will not affect the dragging of the network.
</td>
</tr>
@ -902,7 +902,7 @@ var options = {
<td>selectable</td>
<td>Boolean</td>
<td>true</td>
<td>If true, nodes in the graph can be selected by clicking them.
<td>If true, nodes in the network can be selected by clicking them.
Long press can be used to select multiple nodes.</td>
</tr>
@ -910,7 +910,7 @@ var options = {
<td>stabilize</td>
<td>Boolean</td>
<td>true</td>
<td>If true, the graph is stabilized before displaying it. If false,
<td>If true, the network is stabilized before displaying it. If false,
the nodes move to a stabe position visibly in an animated way.</td>
</tr>
@ -919,21 +919,21 @@ var options = {
<td>Number</td>
<td>1000</td>
<td>If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes
before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your graph is not stabilized after loading, this number can be increased.</td>
before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased.</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>"400px"</td>
<td>The width of the graph in pixels or as a percentage.</td>
<td>The width of the network in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the graph can be zoomed.
Toggle if the network can be zoomed.
</td>
</tr>
@ -969,7 +969,7 @@ var options = {
<p>
The following options are available for nodes. These options must be created
inside an object <code>nodes</code> in the graphs options object.</p>
inside an object <code>nodes</code> in the networks options object.</p>
<table>
<tr>
@ -1139,7 +1139,7 @@ var options = {
<p>
The following options are available for edges. These options must be created
inside an object <code>edges</code> in the graphs options object.
inside an object <code>edges</code> in the networks options object.
</p>
<table>
@ -1387,7 +1387,7 @@ var nodes = [
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. <br/>
When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
<p class="important_note">Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.</p>
<p class="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.</p>
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named physics.
@ -1551,9 +1551,9 @@ var options = {
</tr>
</table>
<h4 id="PhysicsConfiguration">Configuration:</h4>
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
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network 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 physics options as described above.
settings you are happy with, you can supply them to network using the physics options as described above.
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.
<pre class="prettyprint">
@ -1563,9 +1563,9 @@ var options = {
</pre>
<h3 id="Data_manipulation">Data manipulation</h3>
<p>
By using the data manipulation feature of the graph you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
By using the data manipulation feature of the network you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions
into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/graph/21_data_manipulation.html">example 21</a>,
into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/Network/21_data_manipulation.html">example 21</a>,
two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection. To correctly display the manipulation icons, the <b>vis.css</b> file must be included.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</p>
@ -1608,7 +1608,7 @@ var options: {
<h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4>
<p>
Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
If the callback is NOT called, nothing happens. <a href="../examples/graph/21_data_manipulation.html">Example 21</a> has two working examples
If the callback is NOT called, nothing happens. <a href="../examples/Network/21_data_manipulation.html">Example 21</a> has two working examples
for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
@ -1680,12 +1680,12 @@ var options: {
An code snippet from example 21 is shown below.
</p>
<pre class="prettyprint">
graph.on("resize", function(params) {console.log(params.width,params.height)});
network.on("resize", function(params) {console.log(params.width,params.height)});
</pre>
<h3 id="Clustering">Clustering</h3>
<p>
The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
The network now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
@ -1863,7 +1863,7 @@ var options: {
<td>At every clustering session, Graph will check if the difference between cluster levels is
acceptable. When a cluster is formed when zooming out, that is one cluster level.
If you zoom out further and it encompasses more nodes, that is another level. For example:
If the highest level of your graph at any given time is 3, nodes that have not clustered or
If the highest level of your network at any given time is 3, nodes that have not clustered or
have clustered only once will join their neighbour with the lowest cluster level.</td>
</tr>
</table>
@ -1885,8 +1885,8 @@ var options: {
<h3 id="Keyboard_navigation">Keyboard navigation</h3>
<p>
The graph can be navigated using shortcut keys.
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>.
The network can be navigated using shortcut keys.
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/Network/20_navigation.html">20_navigation.html</a>.
</p>
<pre class="prettyprint">
@ -1939,9 +1939,9 @@ var options: {
<h3 id="Hierarchical_layout">Hierarchical layout</h3>
<p>
The graph can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
The network can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method
is shown in <a href="../examples/graph/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/graph/24_hierarchical_layout_userdefined.html">example 24</a>.
is shown in <a href="../examples/Network/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/Network/24_hierarchical_layout_userdefined.html">example 24</a>.
This layout method does not support smooth curves or clustering. It automatically turns these features off.
</p>
@ -2001,7 +2001,7 @@ var options: {
<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).
<td>This defines the direction the network 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>
@ -2155,19 +2155,19 @@ var options: {
<td>storePosition()</td>
<td>none</td>
<td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
</td>
</tr>
<tr>
<td>DOMtoCanvas(pos)</td>
<td>object</td>
<td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
<td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
</td>
</tr>
<tr>
<td>canvasToDOM(pos)</td>
<td>object</td>
<td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
<td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
</td>
</tr>
<tr>
@ -2185,7 +2185,7 @@ var options: {
<tr>
<td>redraw()</td>
<td>none</td>
<td>Redraw the graph. Useful when the layout of the webpage changed.</td>
<td>Redraw the network. Useful when the layout of the webpage changed.</td>
</tr>
<tr>
@ -2202,7 +2202,7 @@ var options: {
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set options for the graph. The available options are described in
<td>Set options for the network. The available options are described in
the section <a href="#Configuration_options">Configuration Options</a>.
</td>
</tr>
@ -2213,7 +2213,7 @@ var options: {
<td>Select nodes.
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>graph.selectNodes([3, 5]);</code> will select
Example usage: <code>network.selectNodes([3, 5]);</code> will select
nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
</td>
</tr>
@ -2223,7 +2223,7 @@ var options: {
<td>Select Edges.
<code>selection</code> is an array with ids of edges to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>graph.selectEdges([3, 5]);</code> will select
Example usage: <code>network.selectEdges([3, 5]);</code> will select
edges with id 3 and 5.
</td>
</tr>
@ -2233,7 +2233,7 @@ var options: {
<td>Select nodes [deprecated].
<code>selection</code> is an array with ids of nodes to be selected.
The array <code>selection</code> can contain zero or multiple ids.
Example usage: <code>graph.setSelection([3, 5]);</code> will select
Example usage: <code>network.setSelection([3, 5]);</code> will select
nodes with id 3 and 5.
</td>
</tr>
@ -2249,7 +2249,7 @@ var options: {
<tr>
<td>zoomExtent()</td>
<td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
<td>Scales the network so all the nodes are in center view.</td>
</tr>
</table>
@ -2265,7 +2265,7 @@ var options: {
</p>
<pre class="prettyprint lang-js">
graph.on('select', function (properties) {
network.on('select', function (properties) {
alert('selected nodes: ' + properties.nodes);
});
</pre>
@ -2280,12 +2280,12 @@ function onSelect (properties) {
}
// add event listener
graph.on('select', onSelect);
network.on('select', onSelect);
// do stuff...
// remove event listener
graph.off('select', onSelect);
network.off('select', onSelect);
</pre>
@ -2364,7 +2364,7 @@ graph.off('select', onSelect);
</tr>
<tr>
<td>stabilized</td>
<td>Fired when the graph has been stabilized after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>Fired when the network has been stabilized after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>
<ul>
<li><code>iterations</code>: number of iterations used to stabilize</li>
@ -2373,14 +2373,14 @@ graph.off('select', onSelect);
</tr>
<tr>
<td>viewChanged</td>
<td>Fired when the view has changed. This is when the graph has moved or zoomed.</td>
<td>Fired when the view has changed. This is when the network has moved or zoomed.</td>
<td>
none
</td>
</tr>
<tr>
<td>zoom</td>
<td>Fired when the graph has zoomed. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>Fired when the network has zoomed. This event can be used to trigger the .storePosition() function after stabilization.</td>
<td>
<ul>
<li><code>direction: </code> "+" or "-" </li>

examples/graph/01_basic_usage.html → examples/Network/01_basic_usage.html View File

@ -1,12 +1,12 @@
<!doctype html>
<html>
<head>
<title>Graph | Basic usage</title>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
@ -16,7 +16,7 @@
<body>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
@ -36,14 +36,14 @@
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
</script>
</body>

examples/graph/02_random_nodes.html → examples/Network/02_random_nodes.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -69,8 +69,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -81,10 +81,10 @@
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -100,7 +100,7 @@
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/03_images.html → examples/Network/03_images.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Images</title>
<title>Network | Images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
var DIR = 'img/refresh-cl/';
var LENGTH_MAIN = 150;
@ -50,7 +50,7 @@
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
edges.push({from: 3, to: 102, length: LENGTH_SUB});
nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
edges.push({from: 1, to: 103, length: LENGTH_SUB});
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
@ -61,8 +61,8 @@
edges.push({from: 3, to: i, length: LENGTH_SUB});
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -70,14 +70,14 @@
var options = {
stabilize: false // stabilize positions before displaying
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/04_shapes.html → examples/Network/04_shapes.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Shapes</title>
<title>Network | Shapes</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 100%;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [
@ -54,8 +54,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -63,13 +63,13 @@
var options = {
stabilize: false
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div>
</body>

examples/graph/05_social_network.html → examples/Network/05_social_network.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Social Network</title>
<title>Network | Social Network</title>
<style>
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -22,7 +22,7 @@
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
// create people
@ -55,20 +55,20 @@
{from: 2, to: 7, value: 4, label: 4, color: color}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p>
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p>

examples/graph/06_groups.html → examples/Network/06_groups.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Groups</title>
<title>Network | Groups</title>
<style>
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -20,7 +20,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
google.load('visualization', '1');
@ -57,7 +57,7 @@
});
connectionCount[i] = 0;
// create links in a scale-free-graph way
// create links in a scale-free-network way
if (i == 1) {
from = i;
to = 0;
@ -124,8 +124,8 @@
group++;
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -139,7 +139,7 @@
length: 50
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
@ -154,7 +154,7 @@
</form>
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/07_selections.html → examples/Network/07_selections.html View File

@ -1,12 +1,12 @@
<!doctype html>
<html>
<head>
<title>Graph | Selections</title>
<title>Network | Selections</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
@ -16,7 +16,7 @@
<body>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div>
<script type="text/javascript">
@ -37,8 +37,8 @@
{from: 2, to: 5}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -48,15 +48,15 @@
shape: 'box'
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listener
graph.on('select', function(properties) {
network.on('select', function(properties) {
document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
});
// set initial selection (id's of some nodes)
graph.setSelection([3, 4, 5]);
network.setSelection([3, 4, 5]);
</script>
</body>

examples/graph/08_mobile_friendly.html → examples/Network/08_mobile_friendly.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph | Mobile friendly</title>
<title>Network | Mobile friendly</title>
<style type="text/css">
html, body {
@ -12,7 +12,7 @@
height: 100%;
}
#mygraph {
#mynetwork {
width: 100%;
height: 100%;
}
@ -26,7 +26,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
@ -80,8 +80,8 @@
}
}
// Create a graph
var container = document.getElementById('mygraph');
// Create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -97,12 +97,12 @@
width: 2
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()" onresize="graph.redraw();">
<div id="mygraph"></div>
<body onload="draw()" onresize="network.redraw();">
<div id="mynetwork"></div>
</body>
</html>

examples/graph/09_sizing.html → examples/Network/09_sizing.html View File

@ -1,13 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Sizing</title>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
var DIR = 'img/soft-scraps-icons/';
@ -55,8 +55,8 @@
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our graph object.
var container = document.getElementById('mygraph');
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -69,12 +69,12 @@
color: '#97C2FC'
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/10_multiline_text.html → examples/Network/10_multiline_text.html View File

@ -1,10 +1,10 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Multiline text</title>
<title>Network | Multiline text</title>
<style type="text/css">
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -32,19 +32,19 @@
{from: 1, to: 5, style: 'arrow', width: 3, length: 200}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/11_custom_style.html → examples/Network/11_custom_style.html View File

@ -1,13 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Custom style</title>
<title>Network | Custom style</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -20,7 +20,7 @@
var nodes = null;
var edges = null;
var options = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
@ -114,18 +114,18 @@
}
};
// create the graph
var container = document.getElementById('mygraph');
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/12_scalable_images.html → examples/Network/12_scalable_images.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Scalable images</title>
<title>Network | Scalable images</title>
<style type="text/css">
body {
font: 10pt arial;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -21,7 +21,7 @@
var nodes = null;
var edges = null;
var graph = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
@ -57,8 +57,8 @@
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -72,13 +72,13 @@
color: 'lightgray'
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
<div id="info"></div>
</body>

examples/graph/13_dashed_lines.html → examples/Network/13_dashed_lines.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Dashed lines</title>
<title>Network | Dashed lines</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -35,8 +35,8 @@
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
];
// create the graph
var container = document.getElementById('mygraph');
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -50,7 +50,7 @@
},
stabilize: false
};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
}
</script>
</head>
@ -60,6 +60,6 @@
This example shows the different options for dashed lines.
</p>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

+ 18
- 0
examples/Network/14_dot_language.html View File

@ -0,0 +1,18 @@
<html>
<head>
<title>Network | DOT Language</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
var network = new vis.Network(container, data);
</script>
</body>
</html>

examples/graph/15_dot_language_playground.html → examples/Network/15_dot_language_playground.html View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Graph | DOT language playground</title>
<title>Network | DOT language playground</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
@ -33,7 +33,7 @@
border: 1px solid #d3d3d3;
}
#mygraph {
#mynetwork {
float: left;
width: 100%;
height: 100%;
@ -73,22 +73,22 @@
<textarea id="data"></textarea>
</td>
<td>
<div id="mygraph"></div>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
var graph, data;
var network, data;
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the graph when window resizes
// resize the network when window resizes
window.onresize = function () {
graph.redraw()
network.redraw()
};
// parse and draw the data
@ -101,10 +101,10 @@
dot: txtData.value
};
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
catch (err) {
// set the cursor at the position where the error occurred
@ -133,7 +133,7 @@
</script>
<textarea id="example1" class="example">
digraph {
dinetwork {
node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black]
@ -151,7 +151,7 @@
</textarea>
<textarea id="example2" class="example">
digraph topology
dinetwork topology
{
node[shape=circle fontSize=12]
edge[length=170 fontSize=12]
@ -173,7 +173,7 @@
</textarea>
<textarea id="example3" class="example">
digraph G {
dinetwork G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored

examples/graph/16_dynamic_data.html → examples/Network/16_dynamic_data.html View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Graph | DataSet</title>
<title>Network | DataSet</title>
<style type="text/css">
html, body {
@ -45,7 +45,7 @@
font-size: 10pt;
}
#graph {
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
@ -56,7 +56,7 @@
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes, edges, graph;
var nodes, edges, network;
// convenience method to stringify a JSON object
function toJSON (obj) {
@ -157,14 +157,14 @@
{id: '4', from: '2', to: '5'}
]);
// create a graph
var container = $('#graph').get(0);
// create a network
var container = $('#network').get(0);
var data = {
nodes: nodes,
edges: edges
};
var options = {};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
});
</script>
</head>
@ -255,8 +255,8 @@
</td>
<td>
<h2>Graph</h2>
<div id="graph"></div>
<h2>Network</h2>
<div id="network"></div>
</td>
</tr>
</table>

examples/graph/17_network_info.html → examples/Network/17_network_info.html View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Graph | Images</title>
<title>Network | Images</title>
<style type="text/css">
body {
@ -10,7 +10,7 @@
margin: 0;
overflow: hidden;
}
#mygraph {
#mynetwork {
width: 100%;
height: 100%;
box-sizing: border-box;
@ -22,7 +22,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
var LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
@ -92,9 +92,9 @@
// legend
var mygraph = document.getElementById('mygraph');
var x = - mygraph.clientWidth / 2 + 50;
var y = - mygraph.clientHeight / 2 + 50;
var mynetwork = document.getElementById('mynetwork');
var x = - mynetwork.clientWidth / 2 + 50;
var y = - mynetwork.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
@ -102,8 +102,8 @@
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -141,14 +141,14 @@
}
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
<div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>

examples/graph/18_fully_random_nodes_clustering.html → examples/Network/18_fully_random_nodes_clustering.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Fully random nodes clustering</title>
<title>Network | Fully random nodes clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -45,9 +45,9 @@
to: to
});
}
// create a graph
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mygraph');
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -61,10 +61,10 @@
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -72,7 +72,7 @@
</head>
<body onload="draw();">
<h2>Clustering - Fully random graph</h2>
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px;">
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
@ -95,7 +95,7 @@
</form>
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/19_scale_free_graph_clustering.html → examples/Network/19_scale_free_graph_clustering.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Scale free graph clustering</title>
<title>Network | Scale free network clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -68,10 +68,10 @@
}
}
// create a graph
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
var container = document.getElementById('mygraph');
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -94,10 +94,10 @@
},
stabilize: false
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -105,9 +105,9 @@
</head>
<body onload="draw();">
<h2>Clustering - Scale-Free-Graph</h2>
<h2>Clustering - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;">
This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
@ -131,7 +131,7 @@
</form>
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/20_navigation.html → examples/Network/20_navigation.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Navigation</title>
<title>Network | Navigation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -39,7 +39,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -56,7 +56,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -88,8 +88,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -113,10 +113,10 @@
navigation: true,
keyboard: true
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -130,13 +130,13 @@
<table class="legend_table">
<tr>
<td>Icons: </td>
<td><div class="table_content"><img src="../../dist/img/graph/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/graph/zoomExtends.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/network/zoomExtends.png" /> </div></td>
</tr>
<tr>
<td><div class="table_description">Keyboard shortcuts:</div></td>
@ -175,7 +175,7 @@
</form>
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/21_data_manipulation.html → examples/Network/21_data_manipulation.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Navigation</title>
<title>Network | Navigation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
position:relative;
width: 600px;
height: 600px;
@ -36,7 +36,7 @@
#operation {
font-size:28px;
}
#graph-popUp {
#network-popUp {
display:none;
position:absolute;
top:350px;
@ -58,7 +58,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -75,7 +75,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -107,8 +107,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -125,7 +125,7 @@
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
span.innerHTML = "Add Node";
idInput.value = data.id;
labelInput.value = data.label;
@ -139,7 +139,7 @@
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
span.innerHTML = "Edit Node";
idInput.value = data.id;
labelInput.value = data.label;
@ -159,21 +159,21 @@
}
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
graph.on("resize", function(params) {console.log(params.width,params.height)});
network.on("resize", function(params) {console.log(params.width,params.height)});
function clearPopUp() {
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
saveButton.onclick = null;
cancelButton.onclick = null;
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
div.style.display = 'none';
}
@ -181,7 +181,7 @@
function saveData(data,callback) {
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var div = document.getElementById('graph-popUp');
var div = document.getElementById('network-popUp');
data.id = idInput.value;
data.label = labelInput.value;
clearPopUp();
@ -204,7 +204,7 @@
</div>
<br />
<div id="graph-popUp">
<div id="network-popUp">
<span id="operation">node</span> <br>
<table style="margin:auto;"><tr>
<td>id</td><td><input id="node-id" value="new value"></td>
@ -216,7 +216,7 @@
<input type="button" value="cancel" id="cancelButton"></button>
</div>
<br />
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/22_les_miserables.html → examples/Network/22_les_miserables.html View File

@ -1,10 +1,10 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Multiline text</title>
<title>Network | Multiline text</title>
<style type="text/css">
#mygraph {
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
@ -354,20 +354,20 @@
{"from":76,"to":58}
];
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
<div id="mynetwork"></div>
</body>
</html>

examples/graph/23_hierarchical_layout.html → examples/Network/23_hierarchical_layout.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
@ -38,7 +38,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -71,8 +71,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -86,10 +86,10 @@
direction: directionInput.value
}
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -98,9 +98,9 @@
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Graph</h2>
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;">
This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br />
@ -140,7 +140,7 @@
</script>
<br>
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/24_hierarchical_layout_userdefined.html → examples/Network/24_hierarchical_layout_userdefined.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Random nodes</title>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -105,8 +105,8 @@
nodes[14]["level"] = 5;
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -115,10 +115,10 @@
var options = {
hierarchicalLayout:true
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -132,7 +132,7 @@
</div>
<br />
<div id="mygraph"></div>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/25_physics_configuration.html → examples/Network/25_physics_configuration.html View File

@ -1,13 +1,13 @@
<!doctype html>
<html>
<head>
<title>Graph | Playing with Physics</title>
<title>Network | Playing with Physics</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
@ -19,7 +19,7 @@
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
var network = null;
function draw() {
nodes = [];
@ -36,7 +36,7 @@
connectionCount[i] = 0;
// create edges in a scale-free-graph way
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
@ -69,8 +69,8 @@
}
}
// create a graph
var container = document.getElementById('mygraph');
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
@ -82,10 +82,10 @@
stabilize: false,
configurePhysics:true
};
graph = new vis.Graph(container, data, options);
network = new vis.Network(container, data, options);
// add event listeners
graph.on('select', function(params) {
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
@ -96,14 +96,14 @@
<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
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network 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.
settings you are happy with, you can supply them to network 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>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>

examples/graph/graphviz/data/fsm.gv.txt → examples/Network/graphviz/data/fsm.gv.txt View File


examples/graph/graphviz/data/hello.gv.txt → examples/Network/graphviz/data/hello.gv.txt View File


examples/graph/graphviz/data/process.gv.txt → examples/Network/graphviz/data/process.gv.txt View File


examples/graph/graphviz/data/siblings.gv.txt → examples/Network/graphviz/data/siblings.gv.txt View File


examples/graph/graphviz/data/softmaint.gv.txt → examples/Network/graphviz/data/softmaint.gv.txt View File


examples/graph/graphviz/data/traffic_lights.gv.txt → examples/Network/graphviz/data/traffic_lights.gv.txt View File


examples/graph/graphviz/data/transparency.gv.txt → examples/Network/graphviz/data/transparency.gv.txt View File


examples/graph/graphviz/data/twopi2.gv.txt → examples/Network/graphviz/data/twopi2.gv.txt View File


examples/graph/graphviz/data/unix.gv.txt → examples/Network/graphviz/data/unix.gv.txt View File


examples/graph/graphviz/data/world.gv.txt → examples/Network/graphviz/data/world.gv.txt View File


examples/graph/graphviz/graphviz_gallery.html → examples/Network/graphviz/graphviz_gallery.html View File

@ -65,7 +65,7 @@
<script type="text/javascript">
var container = document.getElementById('mygraph');
var url = document.getElementById('url');
var graph = new vis.Graph(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
var graph = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
function loadData () {
$.ajax({

examples/graph/graphviz/screenshots/fsm.png → examples/Network/graphviz/screenshots/fsm.png View File


examples/graph/graphviz/screenshots/hello.png → examples/Network/graphviz/screenshots/hello.png View File


examples/graph/graphviz/screenshots/softmaint.png → examples/Network/graphviz/screenshots/softmaint.png View File


examples/graph/graphviz/screenshots/traffic_lights.png → examples/Network/graphviz/screenshots/traffic_lights.png View File


examples/graph/img/refresh-cl/Hardware-Fax-icon.png → examples/Network/img/refresh-cl/Hardware-Fax-icon.png View File


examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png → examples/Network/img/refresh-cl/Hardware-Laptop-1-icon.png View File


examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png → examples/Network/img/refresh-cl/Hardware-Mobile-Phone-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png → examples/Network/img/refresh-cl/Hardware-My-Computer-3-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png → examples/Network/img/refresh-cl/Hardware-My-PDA-02-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png → examples/Network/img/refresh-cl/Hardware-My-PDA-04-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png → examples/Network/img/refresh-cl/Hardware-My-PDA-05-icon.png View File


examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png → examples/Network/img/refresh-cl/Hardware-My-Phone-Picture-icon.png View File


examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png → examples/Network/img/refresh-cl/Hardware-Printer-Blue-icon.png View File


examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png → examples/Network/img/refresh-cl/Misc-Scanner-default-icon.png View File


examples/graph/img/refresh-cl/Network-Drive-icon.png → examples/Network/img/refresh-cl/Network-Drive-icon.png View File


examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png → examples/Network/img/refresh-cl/Network-Internet-Connection-icon.png View File


examples/graph/img/refresh-cl/Network-Pipe-icon.png → examples/Network/img/refresh-cl/Network-Pipe-icon.png View File


examples/graph/img/refresh-cl/System-Firewall-2-icon.png → examples/Network/img/refresh-cl/System-Firewall-2-icon.png View File


examples/graph/img/refresh-cl/System-Globe-icon.png → examples/Network/img/refresh-cl/System-Globe-icon.png View File


examples/graph/img/refresh-cl/license.txt → examples/Network/img/refresh-cl/license.txt View File


examples/graph/img/soft-scraps-icons/Document-icon24.png → examples/Network/img/soft-scraps-icons/Document-icon24.png View File


examples/graph/img/soft-scraps-icons/Document-icon32.png → examples/Network/img/soft-scraps-icons/Document-icon32.png View File


examples/graph/img/soft-scraps-icons/Document-icon48.png → examples/Network/img/soft-scraps-icons/Document-icon48.png View File


examples/graph/img/soft-scraps-icons/Email-icon24.png → examples/Network/img/soft-scraps-icons/Email-icon24.png View File


examples/graph/img/soft-scraps-icons/Email-icon32.png → examples/Network/img/soft-scraps-icons/Email-icon32.png View File


examples/graph/img/soft-scraps-icons/Email-icon48.png → examples/Network/img/soft-scraps-icons/Email-icon48.png View File


examples/graph/img/soft-scraps-icons/Folder-icon24.png → examples/Network/img/soft-scraps-icons/Folder-icon24.png View File


examples/graph/img/soft-scraps-icons/Folder-icon32.png → examples/Network/img/soft-scraps-icons/Folder-icon32.png View File


examples/graph/img/soft-scraps-icons/Folder-icon48.png → examples/Network/img/soft-scraps-icons/Folder-icon48.png View File


examples/graph/img/soft-scraps-icons/Folder-icon64.png → examples/Network/img/soft-scraps-icons/Folder-icon64.png View File


examples/graph/img/soft-scraps-icons/Smiley-Angry-icon.png → examples/Network/img/soft-scraps-icons/Smiley-Angry-icon.png View File


examples/graph/img/soft-scraps-icons/Smiley-Grin-icon.png → examples/Network/img/soft-scraps-icons/Smiley-Grin-icon.png View File


examples/graph/img/soft-scraps-icons/User-Administrator-Blue-icon.png → examples/Network/img/soft-scraps-icons/User-Administrator-Blue-icon.png View File


examples/graph/img/soft-scraps-icons/User-Administrator-Green-icon.png → examples/Network/img/soft-scraps-icons/User-Administrator-Green-icon.png View File


examples/graph/img/soft-scraps-icons/User-Coat-Blue-icon.png → examples/Network/img/soft-scraps-icons/User-Coat-Blue-icon.png View File


examples/graph/img/soft-scraps-icons/User-Coat-Green-icon.png → examples/Network/img/soft-scraps-icons/User-Coat-Green-icon.png View File


examples/graph/img/soft-scraps-icons/User-Coat-Red-icon.png → examples/Network/img/soft-scraps-icons/User-Coat-Red-icon.png View File


examples/graph/img/soft-scraps-icons/User-Executive-Green-icon.png → examples/Network/img/soft-scraps-icons/User-Executive-Green-icon.png View File


examples/graph/img/soft-scraps-icons/User-Preppy-Blue-icon.png → examples/Network/img/soft-scraps-icons/User-Preppy-Blue-icon.png View File


examples/graph/img/soft-scraps-icons/User-Preppy-Red-icon.png → examples/Network/img/soft-scraps-icons/User-Preppy-Red-icon.png View File


examples/graph/img/soft-scraps-icons/license.txt → examples/Network/img/soft-scraps-icons/license.txt View File


examples/graph/index.html → examples/Network/index.html View File

@ -2,7 +2,7 @@
<html>
<head>
<title>vis.js | graph examples</title>
<title>vis.js | Network examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
@ -10,7 +10,7 @@
<body>
<div id="container">
<h1>vis.js graph examples</h1>
<h1>vis.js Network examples</h1>
<p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
<p><a href="02_random_nodes.html">02_random_nodes.html</a></p>

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save