| Simulation Mode: | ||
| Barnes Hut | ' + + 'Repulsion | ' + + 'Hierarchical | ' + + '
| Options: | ||
| ' + + ' | ' + + ' | ' + + ' |
| Options: | ||
-var data = new vis.DataSet(options) +var data = new vis.DataSet([data] [, options])
@@ -116,6 +116,11 @@ var data = new vis.DataSet(options) Data Manipulation.
+
+ The parameter datacode> is optional and can be an Array or
+ Google DataTable with items.
+
The parameter options is optional and is an object which can
contain the following properties:
@@ -545,8 +550,8 @@ var items = data.get({
One can subscribe on changes in a DataSet.
- A subscription can be created using the method subscribe,
- and removed with unsubscribe.
+ A subscription can be created using the method on,
+ and removed with off.
@@ -554,8 +559,8 @@ var items = data.get({
var data = new vis.DataSet();
// subscribe to any change in the DataSet
-data.subscribe('*', function (event, params, senderId) {
- console.log('event:', event, 'params:', params, 'senderId:', senderId);
+data.on('*', function (event, properties, senderId) {
+ console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add an item
@@ -565,14 +570,14 @@ data.remove(1); // triggers an 'remove' event
-Subscribe to an event.
Syntax: -DataSet.subscribe(event, callback)+
DataSet.on(event, callback)Where:
Unsubscribe from an event.
Syntax: -DataSet.unsubscribe(event, callback)+
DataSet.off(event, callback)Where
event and callback correspond with the
-parameters used to subscribe to the event.
+parameters used to subscribe to the event.
-function (event, params, senderId) {
+function (event, properties, senderId) {
// handle the event
});
@@ -674,13 +679,13 @@ function (event, params, senderId) {
add,
update, and remove,
- params is always an object containing a property
+ properties is always an object containing a property
items, which contains an array with the ids of the affected
items.
The graph visualization works smooth on any modern browser for up to a - few hundred nodes and edges. + few thousand nodes and edges. To handle a larger amount of nodes, Graph + has clustering support. +
+ ++ Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option + that the user can use to explore which settings may be good for you. Use configurePhysics as described in the Physics section or by + example 25.
@@ -53,9 +60,14 @@
image.image.
+undefined
+ will prevent the tooltip from being displayed.
label is defined.
label is defined.undefined
+ will prevent the tooltip from being displayed.
image.dash-line.+ The original simulation method was based on particel physics with a repulsion field (potential) around each node, + and the edges were modelled as springs. The new system employed the Barnes-Hut gravitational simulation model. The edges are still modelled as springs. + To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters. + If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. + +
Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described below or by example 25.
+ +
+// These variables must be defined in an options object named physics.
+// If a variable is not supplied, the default value is used.
+var options = {
+ physics: {
+ barnesHut: {
+ enabled: true,
+ gravitationalConstant: -2000,
+ centralGravity: 0.1,
+ springLength: 95,
+ springConstant: 0.04,
+ damping: 0.09
+ },
+ repulsion: {
+ centralGravity: 0.1,
+ springLength: 50,
+ springConstant: 0.05,
+ nodeDistance: 100,
+ damping: 0.09
+ },
+ }
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| enabled | +Boolean | +true | +This switches the Barnes-Hut simulation on or off. If it is turned off, the old repulsion model is used. Barnes-Hut is generally faster and yields better results. | +
| gravitationalConstant | +Number | +-2000 | +This is the gravitational constand used to calculate the gravity forces. More information is available here. | +
| centralGravity | +Number | +0.1 | +The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | +
| springLength | +Number | +95 | +In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. + To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | +
| springConstant | +Number | +0.04 | +This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | +
| damping | +Number | +0.09 | +This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | +
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| centralGravity | +Number | +0.1 | +The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart. | +
| springLength | +Number | +50 | +In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. + To greatly reduce the edge length, the gravitationalConstant has to be reduced as well. | +
| nodeDistance | +Number | +100 | +This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero. | +
| springConstant | +Number | +0.05 | +This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available here. | +
| damping | +Number | +0.09 | +This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available here. | +
+var options = {
+ configurePhysics:true
+}
+
++ 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. + 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 example 21, + 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 vis.css file must be included. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. +
+
+// These variables must be defined in an options object named dataManipulation.
+// If a variable is not supplied, the default value is used.
+var options = {
+ dataManipulation: {
+ enabled: false,
+ initiallyVisible: false
+ }
+}
+// OR to just load the module with default values:
+var options: {
+ dataManipulation: true
+}
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| enabled | +Boolean | +false | +Enabling or disabling of the data manipulation toolbar. If it is initially hidden, an edit button appears in the top left corner. | +
| initiallyVisible | +Boolean | +false | +Initially hide or show the data manipulation toolbar. | +
+ 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. Example 21 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
+ requires the same data structure that is supplied to the user.
+ If there is no injected function supplied for the edit operation, the button will not be shown in the toolbar.
+
+// If a variable is not supplied, the default value is used.
+var options: {
+ dataManipulation: true,
+ onAdd: function(data,callback) {
+ /** data = {id: random unique id,
+ * label: new,
+ * x: x position of click (canvas space),
+ * y: y position of click (canvas space),
+ * allowedToMoveX: true,
+ * allowedToMoveY: true
+ * };
+ */
+ var newData = {..}; // alter the data as you want.
+ // all fields normally accepted by a node can be used.
+ callback(newData); // call the callback to add a node.
+ },
+ onEdit: function(data,callback) {
+ /** data = {id:...,
+ * label: ...,
+ * group: ...,
+ * shape: ...,
+ * color: {
+ * background:...,
+ * border:...,
+ * highlight: {
+ * background:...,
+ * border:...
+ * }
+ * }
+ * };
+ */
+ var newData = {..}; // alter the data as you want.
+ // all fields normally accepted by a node can be used.
+ callback(newData); // call the callback with the new data to edit the node.
+ }
+ onConnect: function(data,callback) {
+ // data = {from: nodeId1, to: nodeId2};
+ var newData = {..}; // check or alter data as you see fit.
+ callback(newData); // call the callback to connect the nodes.
+ },
+ onDelete: function(data,callback) {
+ // data = {nodes: [selectedNodeIds], edges: [selectedEdgeIds]};
+ var newData = {..}; // alter the data as you want.
+ // the same data structure is required.
+ callback(newData); // call the callback to delete the objects.
+ }
+};
+
++ Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called resize. + A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly. + An code snippet from example 21 is shown below. +
+
+graph.on("resize", function(params) {console.log(params.width,params.height)});
+
+
The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without @@ -1150,16 +1551,19 @@ var options = { reduceToNodes:300, chainThreshold: 0.4, clusterEdgeThreshold: 20, - sectorThreshold: 50, + sectorThreshold: 100, screenSizeThreshold: 0.2, fontSizeMultiplier: 4.0, - forceAmplification: 0.6, - distanceAmplification: 0.2, - edgeGrowth: 11, - nodeScaling: {width: 10, - height: 10, - radius: 10}, - activeAreaBoxSize: 100 + maxFontSize: 1000, + forceAmplification: 0.1, + distanceAmplification: 0.1, + edgeGrowth: 20, + nodeScaling: {width: 1, + height: 1, + radius: 1}, + maxNodeSizeIncrements: 600, + activeAreaBoxSize: 100, + clusterLevelDifference: 2 } } // OR to just load the module with default values: @@ -1233,6 +1637,12 @@ var options: {
activeAreaBoxSize pixels around your cursor.
+ If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
+ This is regardless of the zoom level.activeAreaBoxSize pixels around your cursor.
- If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
- This is regardless of the zoom level.Graph has a menu with navigation controls, which is disabled by default. - It can be configured with the following settings. + It can be configured with the following settings. To correctly display the navigation icons, the vis.css file must be included. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
-// simple use of navigation controls
+// use of navigation controls
var options: {
navigation: true
}
-// advanced use of navigation controls
-var options: {
- navigation: {
- iconPath: '/path/to/navigation/icons/'
- }
-}
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| iconPath | -string | -"/img" | -The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js. | -
The graph can be navigated using shortcut keys. - It can be configured with the following user-configurable settings. The default state for the keyboard navigation is off. The predefined keys can be found in the example 20_navigation.html.
@@ -1372,6 +1776,192 @@ var options: { + ++ 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. + 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 example 23 and the user-defined method is shown in example 24. + This layout method does not support smooth curves or clustering. It automatically turns these features off. +
+ +
+// simple use of the hierarchical layout
+var options: {
+ hierarchicalLayout: true
+}
+
+// advanced configuration for hierarchical layout
+var options: {
+ hierarchicalLayout: {
+ enabled:false,
+ levelSeparation: 150,
+ nodeSpacing: 100,
+ direction: "UD"
+ }
+}
+// partial configuration automatically sets enabled to true
+var options: {
+ hierarchicalLayout: {
+ nodeSpacing: 100,
+ direction: "UD"
+ }
+}
+
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| enabled | +Boolean | +false | +Enable or disable the hierarchical layout. + | +
| levelSeparation | +Number | +150 | +This defines the space between levels (in the Y-direction, considering UP-DOWN direction). | +
| nodeSpacing | +Number | +100 | +This defines the space between nodes in the same level (in the X-direction, considering UP-DOWN direction). + This is only relevant during the initial placing of nodes. | +
| direction | +String | +UD | +This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL). + These need to be supplied by the acronyms in parentheses. | +
+ When using vis.js in other languages, one can use the localization option to overwrite the labels used in the data manipulation interface. +
+ +
+var options: {
+ labels:{
+ add:"Add Node",
+ edit:"Edit",
+ link:"Add Link",
+ del:"Delete selected",
+ editNode:"Edit Node",
+ back:"Back",
+ addDescription:"Click in an empty space to place a new node.",
+ linkDescription:"Click on a node and drag the edge to another
+ node to connect them.",
+ addError:"The function for add does not support two arguments
+ (data,callback).",
+ linkError:"The function for connect does not support two arguments
+ (data,callback).",
+ editError:"The function for edit does not support two arguments
+ (data, callback).",
+ editBoundError:"No edit function has been bound to this button.",
+ deleteError:"The function for delete does not support two arguments
+ (data, callback).",
+ deleteClusterError:"Clusters cannot be deleted."
+ }
+}
+
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| labels | +object | +(shown above) | +Overwrite one or all labels used in the datamanipulation interface with localized strings. + | +
+ The behaviour and style of the tooltips used to display node and edge title attributes can be customized. +
+ +
+// tooltip behaviour and style options
+var options: {
+ tooltip: {
+ delay: 300,
+ fontColor: "black",
+ fontSize: 14, // px
+ fontFace: "verdana",
+ color: {
+ border: "#666",
+ background: "#FFFFC6"
+ }
+ }
+}
+
+
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| delay | +Number | +300 | +Time in milliseconds a user must hover over a node or edge before a tooltip appears. | +
| fontColor | +String | +"black" | +Default color for tooltip text. | +
| fontSize | +Number | +14 | +Size in pixels of tooltip text. | +
| fontFace | +String | +"verdana" | +Font family to used for tooltip text. | +
| color.background | +String | +"#FFFFC6" | +Background color for the node. | +
| color.border | +String | +"#666" | +Border color for the node. | +
Graph supports the following methods. @@ -1392,6 +1982,13 @@ var options: { The selections are not ordered. +
nodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgesnodes: an array with the ids of the selected nodesedges: an array with the ids of the selected edgeswidth: the new width of the canvasheight: the new height of the canvasiterations: number of iterations used to stabilizeThe library is developed by - Almende B.V. + Almende B.V.. + Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile + browsers (with full touch support).
- .red {
- background-color: red;
- border-color: dark-red;
- }
- .
+ 'red', one can define a css style like:
+
+.vis.timeline .red {
+ color: white;
+ background-color: red;
+ border-color: darkred;
+}
More details on how to style items can be found in the section
Styles.
var options = {
width: '100%',
- height: '30px'
+ height: '30px',
+ margin: {
+ item: 20
+ }
};
@@ -336,11 +340,19 @@ var options = {
selectable is true. See also the callbacks onAdd, onUpdate, onMove, and onRemove, described in detail in section Editing Items.
+ selectable and editable are set true.
+ selectable and editable are set true.
+ selectable and editable are set true.
+ selectable and editable are set true.
+ options.padding=10, corresponding css is:
+
+.vis.timeline .item {
+ padding: 10px;
+}
+
+select is fired each time the selection has changed (see section Events).timechange is fired repeatedly. After the bar is dragged, the event timechanged is fired once.start: Date and end: Date.start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged.- Timeline fires events when changing the visible window by dragging, or when - selecting items. + Timeline fires events when changing the visible window by dragging, when + selecting items, and when dragging the custom time bar.
@@ -674,7 +739,7 @@ timeline.off('select', onSelect);
time (Date): the current time.time (Date): the current time.
+ When the Timeline is configured to be editable (both options selectable and editable are true), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.
+
+ One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose: +
+ +onAdd(item, callback) Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.onUpdate(item, callback) Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.onMove(item, callback) Fired when an item has been moved. If not implemented, the move action will be accepted.onRemove(item, callback) Fired when an item is about to be deleted. If not implemented, the item will be always removed.+ Each of the callbacks is invoked with two arguments: +
+item: the item being manipulatedcallback: a callback function which must be invoked to report back. The callback must be invoked as callback(item | null). Here, item can contain changes to the passed item. When invoked as callback(null), the action will be cancelled.+ Example code: +
+ +var options = {
+ onUpdate: function (item, callback) {
+ item.content = prompt('Edit items text:', item.content);
+ if (item.content != null) {
+ callback(item); // send back adjusted item
+ }
+ else {
+ callback(null); // cancel updating the item
+ }
+ }
+}
+
+
+A full example is available here: 08_edit_items.html.
+
@@ -709,7 +841,7 @@ timeline.off('select', onSelect);
For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.
<style>
- .graph .item {
+ .vis.timeline .item {
border-color: orange;
background-color: yellow;
}
diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html
index f5a05364..b435fd56 100755
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@@ -57,6 +57,7 @@
j++;
}
+
var from = i;
var to = j;
edges.push({
@@ -74,22 +75,11 @@
nodes: nodes,
edges: edges
};
- /*
- var options = {
- nodes: {
- shape: 'circle'
- },
- edges: {
- length: 50
- },
- stabilize: false
- };
- */
+
var options = {
edges: {
- length: 50
},
- stabilize: false
+ stabilize: false,
};
graph = new vis.Graph(container, data, options);
@@ -102,12 +92,12 @@
-
+
| id | + |
| label | + |