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 +554,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 +565,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 +674,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.
@@ -53,9 +54,12 @@
image.image.
+
+
+ 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. +
+
+// 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: 100,
+ springConstant: 0.05,
+ 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 | +100 | +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.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. | +
| 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. | +
+ 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. +
+
+// 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),
+ * allowedToMove: 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 frameResize. + 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("frameResize", 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 +1424,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 +1510,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.
-// 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 +1648,59 @@ 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 keyboard controls
+var options: {
+ hierarchicalLayout: {
+ enabled:false,
+ levelSeparation: 150,
+ nodeSpacing: 100
+ }
+}
+
+
+| 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). | +
| nodeSpacing | +Number | +100 | +This defines the space between nodes in the same level (in the X-direction). | +
Graph supports the following methods. diff --git a/docs/timeline.html b/docs/timeline.html index eaaf2339..6cfe8bf3 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -39,6 +39,7 @@
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.
+ 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 +730,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 +832,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/download/vis.zip b/download/vis.zip
index be2fa4b4..536c8a42 100644
Binary files a/download/vis.zip and b/download/vis.zip differ
diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html
index f5a05364..ea1202aa 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({
@@ -87,7 +88,6 @@
*/
var options = {
edges: {
- length: 50
},
stabilize: false
};
@@ -102,7 +102,6 @@
-