| x: | "+t.point.x+" |
| y: | "+t.point.y+" |
| z: | "+t.point.z+" |
| Options: | ||
| Options: | ||
- Nodes support the following properties: + Nodes support the properties listed below. Each node can be configured individually using + the properties highlighted in green over at the Nodes configuration.
| Description | -||||
|---|---|---|---|---|
| borderWidth | -Number | -1 | -The width of the border of the node when it is not selected, automatically limited by the width of the node. | -|
| borderWidthSelected | -Number | -undefined | -The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used. | -|
| color | -String | Object | -no | -Color for the node. | -|
| color.background | -String | -no | -Background color for the node. | -|
| color.border | -String | -no | -Border color for the node. | -|
| color.highlight | -String | Object | -no | -Color of the node when selected. | -|
| color.highlight.background | -String | -no | -Background color of the node when selected. | -|
| color.highlight.border | -String | -no | -Border color of the node when selected. | -|
| color.hover.background | -String | -no | -Background color of the node when the node is hovered over and the hover option is enabled. | -|
| color.hover.border | -String | -no | -Border color of the node when the node is hovered over and the hover option is enabled. | -|
| group | Number | String | @@ -346,7 +279,7 @@ When using a DataSet, the network is automatically updating to changes in the Da|||
| allowedToMoveX | Boolean | -false | +no | If allowedToMoveX is false, then the node will not move from its supplied position. If an X position has been supplied, it is fixed in the X-direction. If no X value has been supplied, this argument will not do anything. | @@ -354,31 +287,11 @@ When using a DataSet, the network is automatically updating to changes in the Da
| allowedToMoveY | Boolean | -false | +no | If allowedToMoveY is false, then the node will not move from its supplied position. If an Y position has been supplied, it is fixed in the Y-direction. If no Y value has been supplied, this argument will not do anything. |
| fontColor | -String | -no | -Font color for label in the node. | -|
| fontFace | -String | -no | -Font face for label in the node, for example "verdana" or "arial". | -|
| fontSize | -Number | -no | -Font size in pixels for label in the node. | -|
| id | @@ -390,65 +303,11 @@ When using a DataSet, the network is automatically updating to changes in the Da An id is normally a number, but may be any type.||||
| image | -string | -no | -Url of an image. Only applicable when the shape of the node is
- image. |
-|
| mass | -number | -1 | -When using the Barnes Hut simulation method (which is selected by default), - the mass of a node determines the gravitational repulsion during the simulation. Higher mass will push other nodes further away. | -|
| level | number | --1 | -This level is used in the hierarchical layout. If this is not selected, the level does not do anything. | -|
| radius | -number | -no | -Radius for the node. Applicable for all shapes except box,
- circle, ellipse and database.
- The value of radius will override a value in
- property value. |
-|
| shape | -string | no | -Define the shape for the node.
- Choose from
- ellipse (default), circle, box,
- database, image, label, dot,
- star, triangle, triangleDown, and square.
- - - In case of image, a property with name image must
- be provided, containing image urls.
- - - The shapes dot, star, triangle,
- triangleDown, and square, are scalable.
- The size is determined by the properties radius or
- value.
- - - When a property label is provided,
- this label will be displayed inside the shape in case of shapes
- box, circle, ellipse,
- and database.
- For all other shapes, the label will be displayed right below the shape.
-
- |
+ This level is used in the hierarchical layout. If this is not selected, the level does not do anything. |
- Edges support the following properties: + Edges support properties listed below. Each edge can be configured individually using + the properties highlighted in green over at the Edges configuration.
| Required | Description | -|||
|---|---|---|---|---|
| arrowScaleFactor | -Number | -no | -If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. | -|
| color | -String | Object | -no | -Color for the edge. | -|
| color.color | -String | -no | -Color of the edge when not selected. | -|
| color.highlight | -String | -no | -Color of the edge when selected. | -|
| color.hover | -String | -no | -Color of the edge when the edge is hovered over and the hover option is enabled. | -|
| hoverWidth | -Number | -1.5 | -This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled. | -|
| dash | -Object | -no | -
- Object containing properties for dashed lines.
- Available properties: length, gap,
- altLength.
- |
- |
| dash.altLength | -number | -no | -Length of the alternated dash in pixels on a dashed line.
- Specifying dash.altLength allows for creating
- a dashed line with a dash-dot style, for example when
- dash.length=10 and dash.altLength=5.
- See also the option dahs.length.
- Only applicable when the line style is dash-line. |
- |
| dash.length | -number | -no | -Length of a dash in pixels on a dashed line.
- Only applicable when the line style is dash-line. |
- |
| dash.gap | -number | -no | -Length of a gap in pixels on a dashed line.
- Only applicable when the line style is dash-line. |
- |
| fontColor | -String | -no | -Font color for the text label of the edge.
- Only applicable when property label is defined. |
- |
| fontFace | -String | -no | -Font face for the text label of the edge,
- for example "verdana" or "arial".
- Only applicable when property label is defined. |
- |
| fontSize | -Number | -no | -Font size in pixels for the text label of the edge.
- Only applicable when property label is defined. |
- |
| fontFill | -string | -no | -Font fill for the background color of the text label of the edge.
- Only applicable when property label is defined. |
- |
| from | Number | String | @@ -666,16 +413,6 @@ When using a DataSet, the network is automatically updating to changes in the Da type.|||
| style | -string | -no | -Define a line style for the edge.
- Choose from line (default), arrow,
- arrow-center, or dash-line.
- |
- |
| label | string | @@ -685,17 +422,11 @@ When using a DataSet, the network is automatically updating to changes in the Da|||
| length | number | -physics.[method].springLength | +no | The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths. |
| inheritColor | -String | Boolean | -false | -Possible values: "to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
- the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used. |
- |
| title | string | function | @@ -724,14 +455,6 @@ When using a DataSet, the network is automatically updating to changes in the Da width calculated from the value.|||
| width | -number | -no | -Width of the line in pixels. The width will
- override a specified value, if a value is
- specified too. |
-
The following options are available for nodes. These options must be created
- inside an object nodes in the networks options object.
nodes in the networks options object. All options in green boxes can be defined per-node as well.
+All options defined per-node override these global settings.
| borderWidth | +Number | +1 | +The width of the border of the node when it is not selected, automatically limited by the width of the node. | +|||||
| borderWidthSelected | +Number | +undefined | +The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used. | +|||||
| color | +String | Object | +Object | +Color for the node. | +|||||
| color.background | +String | +#97C2FC | +Background color for the node. | +|||||
| color.border | +String | +#2B7CE9 | +Border color for the node. | +|||||
| color.highlight | +String | Object | +Object | +Color of the node when selected. | +|||||
| color.highlight.background | +String | +#D2E5FF | +Background color of the node when selected. | +|||||
| color.highlight.border | +String | +#2B7CE9 | +Border color of the node when selected. | +|||||
| color.hover.background | +String | +#D2E5FF | +Background color of the node when the node is hovered over and the hover option is enabled. | +|||||
| color.hover.border | +String | +#2B7CE9 | +Border color of the node when the node is hovered over and the hover option is enabled. | +|||||
| fontColor | +String | +black | +Font color for label in the node. | +|||||
| fontFace | +String | +verdana | +Font face for label in the node, for example "verdana" or "arial". | +|||||
| fontSize | +Number | +14 | +Font size in pixels for label in the node. | +|||||
| fontFill | +String | +undefined | +If a color is supplied, there will be a background color behind the label. If left undefined, no background color is shown. | +|||||
| color | -String | Object | -Object | -Default color of the nodes. When color is a string, the color is applied - to both background as well as the border of the node. | -|||||
| color.background | -String | -"#97C2FC" | -Default background color of the nodes | -|||||
| color.border | -String | -"#2B7CE9" | -Default border color of the nodes | -|||||
| color.highlight | -String | Object | -Object | -Default color of the node when the node is selected. In case of a string, the color is applied to - both border and background of the node. | -|||||
| color.highlight.background | -String | -"#D2E5FF" | -Default background color of the node when selected. | -|||||
| color.highlight.border | -String | -"#2B7CE9" | -Default border color of the node when selected. | -|||||
| allowedToMoveX | -Boolean | -false | -If allowedToMoveX is false, then the node will not move from its supplied position. - If an X position has been supplied, it is fixed in the X-direction. - If no X value has been supplied, this argument will not do anything. | -|||||
| allowedToMoveY | -Boolean | -false | -If allowedToMoveY is false, then the node will not move from its supplied position. - If an Y position has been supplied, it is fixed in the Y-direction. - If no Y value has been supplied, this argument will not do anything. | -|||||
| shape | +string | +'ellipse' | +Define the shape for the node.
+ Choose from
+ ellipse (default), circle, box,
+ database, image, label, dot,
+ star, triangle, triangleDown, and square.
+ + + In case of image, a property with name image must
+ be provided, containing image urls.
+ + + The shapes dot, star, triangle,
+ triangleDown, and square, are scalable.
+ The size is determined by the properties radius or
+ value.
+ + + When a property label is provided,
+ this label will be displayed inside the shape in case of shapes
+ box, circle, ellipse,
+ and database.
+ For all other shapes, the label will be displayed right below the shape.
+
+ This shape can be overridden by a group shape, or by a shape of an individual node.
+ |
+|||||
| fontColor | -String | -"black" | -Default font color for the text label in the nodes. | -|||||
| fontFace | -String | -"sans" | -Default font face for the text label in the nodes, for example "verdana" or "arial". | -|||||
| fontSize | -Number | -14 | -Default font size in pixels for the text label in the nodes. | -|||||
| group | +image | String | -none | -Default group for the nodes. | +undefined | +Default image url for the nodes. only applicable to shape image. |
||
| image | +brokenImage | String | -none | -Default image url for the nodes. only applicable to shape image. |
+ undefined | +Image url to use in the event that the url specified in the image property fails to load. only applicable to shape image. |
||
| mass | +mass | number | 1 | When using the Barnes Hut simulation method (which is selected by default), - the mass of a node determines the gravitational repulsion during the simulation. Higher mass will push other nodes further away. | -||||
| level | -number | --1 | -This level is used in the hierarchical layout. If this is not selected, the level does not do anything. | + the mass of a node determines the gravitational repulsion during the simulation. Higher mass will push other nodes further away. Preferably use the physics configuration to + alter the simulation.|||||
| widthMin | @@ -1231,34 +992,23 @@ var options = {||||||||
| shape | -String | -"ellipse" | -The default shape for all nodes.
- Choose from
- ellipse (default), circle, box,
- database, image, label, dot,
- star, triangle, triangleDown, and square.
- This shape can be overridden by a group shape, or by a shape of an individual node. |
- |||||
| radius | +radius | Number | -5 | +10 | The default radius for a node. Only applicable to shapes dot,
star, triangle, triangleDown, and square. |
|||
| radiusMin | Number | -5 | +10 | The minimum radius for a scaled node. Only applicable to shapes dot,
star, triangle, triangleDown, and square. |
||||
| radiusMax | Number | -20 | +30 | The maximum radius for a scaled node. Only applicable to shapes dot,
star, triangle, triangleDown, and square. |
| Default | Description | +||||||
|---|---|---|---|---|---|---|---|
| arrowScaleFactor | -Number | -1 | -If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. | +arrowScaleFactor | +Number | +1 | +If you are using arrows, this will scale the arrow. Values < 1 give smaller arrows, > 1 larger arrows. Default: 1. |
| color | -String | Object | -Object | -Colors of the edge. This object contains both colors for the selected and unselected state. | +color | +String | Object | +Object | +Color for the edge. |
| color.color | -String | -"#848484" | -Color of the edge when not selected. | +color.color | +String | +#848484 | +Color of the edge when not selected. |
| color.highlight | -String | -"#848484" | -Color of the edge when selected. | +color.highlight | +String | +#848484 | +Color of the edge when selected. |
| dash | -Object | -Object | -- Object containing default properties for dashed lines. + | color.hover | +String | +#848484 | +Color of the edge when the edge is hovered over and the hover option is enabled. | +
| hoverWidth | +Number | +1.5 | +This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled. | +||||
| dash | +Object | +Object | +
+ Object containing properties for dashed lines.
Available properties: length, gap,
altLength.
- |
+
||||
| dash.altLength | -number | -none | -Default length of the alternated dash in pixels on a dashed line. + | dash.altLength | +number | +undefined | +Length of the alternated dash in pixels on a dashed line.
Specifying dash.altLength allows for creating
a dashed line with a dash-dot style, for example when
dash.length=10 and dash.altLength=5.
See also the option dahs.length.
Only applicable when the line style is dash-line. |
| dash.length | -number | -10 | -Default length of a dash in pixels on a dashed line. + | dash.length | +number | +10 | +Length of a dash in pixels on a dashed line.
Only applicable when the line style is dash-line. |
| dash.gap | -number | -5 | -Default length of a gap in pixels on a dashed line. + | dash.gap | +number | +5 | +Length of a gap in pixels on a dashed line.
Only applicable when the line style is dash-line. |
| inheritColor | -String | Boolean | -false | -Possible values: "to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
- the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used. |
+ fontColor | +String | +#343434 | +Font color for the text label of the edge.
+ Only applicable when property label is defined. |
+
| fontFace | +String | +arial | +Font face for the text label of the edge,
+ for example "verdana" or "arial".
+ Only applicable when property label is defined. |
+ ||||
| fontSize | +Number | +14 | +Font size in pixels for the text label of the edge.
+ Only applicable when property label is defined. |
+ ||||
| fontFill | +string | +white | +Font fill for the background color of the text label of the edge.
+ Only applicable when property label is defined. |
||||
| style | -String | -"line" | -The default style of a edge. + | style | +string | +line | +Define a line style for the edge.
Choose from line (default), arrow,
- arrow-center, dash-line. |
+
| width | -Number | -1 | -The default width of a edge. | +inheritColor | +String | Boolean | +from | +Possible values: "to","from", true, false. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+ the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used. |
| widthSelectionMultiplier | -Number | -2 | -Determines the thickness scaling of an selected edge. This is applied when an edge, or a node connected to it, is selected. | +width | +number | +1 | +Width of the line in pixels. The width will
+ override a specified value, if a value is
+ specified too. |
| widthSelectionMultiplier | +Number | +2 | +Determines the thickness scaling of an selected edge. This is applied when an edge, or a node connected to it, is selected. | +||||
| widthMin | +Number | +1 | +The minimum thickness of the line when using per-edge defined values. | +||||
| widthMax | +Number | +15 | +The maximum thickness of the line when using per-edge defined values. | +
It is possible to specify custom styles for groups of nodes.
- Each node having assigned to this group gets the specified style.
- The options groups is an object containing one or multiple groups,
- identified by a unique string, the groupname.
+Each node having assigned to this group gets the specified style.
+The options groups is an object containing one or multiple groups,
+identified by a unique string, the groupname.
- A group can have the following styles: +A group can have the following styles:
var options = {
- // ...
+// ...
- groups: {
- mygroup: {
- shape: 'circle',
- color: {
- border: 'black',
- background: 'white',
- highlight: {
- border: 'yellow',
- background: 'orange'
- }
+groups: {
+ mygroup: {
+ shape: 'circle',
+ color: {
+ border: 'black',
+ background: 'white',
+ highlight: {
+ border: 'yellow',
+ background: 'orange'
}
- fontColor: 'red',
- fontSize: 18
}
- // add more groups here
+ fontColor: 'red',
+ fontSize: 18
}
+ // add more groups here
+}
};
var nodes = [
- {id: 1, label: 'Node 1'}, // will get the default style
- {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
- // ... more nodes
+{id: 1, label: 'Node 1'}, // will get the default style
+{id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
+// ... more nodes
];
The following styles are available for groups:
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| Name | +Type | +Default | +Description | +
| color | -String | Object | -Object | -Color of the node | -
| color | +String | Object | +Object | +Color of the node | +
| color.border | -String | -"#2B7CE9" | -Border color of the node | -
| color.border | +String | +"#2B7CE9" | +Border color of the node | +
| color.background | -String | -"#97C2FC" | -Background color of the node | -
| color.highlight | -String | Object | -"#D2E5FF" | -Default color of the node when the node is selected. In case of a string, the color is applied to - both border and background of the node. | -
| color.highlight.background | -String | -"#D2E5FF" | -Background color of the node when selected. | -
| color.highlight.border | -String | -"#D2E5FF" | -Border color of the node when selected. | -
| image | -String | -none | -Default image for the nodes. Only applicable in combination with
- shape image. |
-
| color.background | +String | +"#97C2FC" | +Background color of the node | +
| color.highlight | +String | Object | +"#D2E5FF" | +Default color of the node when the node is selected. In case of a string, the color is applied to + both border and background of the node. | +
| color.highlight.background | +String | +"#D2E5FF" | +Background color of the node when selected. | +
| color.highlight.border | +String | +"#D2E5FF" | +Border color of the node when selected. | +
| image | +String | +none | +Default image for the nodes. Only applicable in combination with
+ shape image. |
+
| fontColor | -String | -"black" | -Font color of the node. | -
| fontFace | -String | -"sans" | -Font name of the node, for example "verdana" or "arial". | -
| fontSize | -Number | -14 | -Font size for the node in pixels. | -
| shape | -String | -"ellipse" | -Choose from
- ellipse (default), circle, box,
- database, image, label, dot,
- star, triangle, triangleDown, and square.
- In case of image, a property with name image must be provided, containing
- image urls. |
-
| radius | -Number | -5 | -Default radius for the node. Only applicable in combination with
- shapes box and dot. |
-
| fontColor | +String | +"black" | +Font color of the node. | +
| fontFace | +String | +"sans" | +Font name of the node, for example "verdana" or "arial". | +
| fontSize | +Number | +14 | +Font size for the node in pixels. | +
| shape | +String | +"ellipse" | +Choose from
+ ellipse (default), circle, box,
+ database, image, label, dot,
+ star, triangle, triangleDown, and square.
+ In case of image, a property with name image must be provided, containing
+ image urls. |
+
| radius | +Number | +5 | +Default radius for the node. Only applicable in combination with
+ shapes box and dot. |
+
- 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.
- 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.
+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.
+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.
Note: if the behaviour of your network is not the way you want it, use configurePhysics as described below or by example 25.
@@ -1544,69 +1345,69 @@ var nodes = [ // 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 - }, - hierarchicalRepulsion: { - centralGravity: 0.5, - springLength: 150, - springConstant: 0.01, - nodeDistance: 60, - damping: 0.09 - } - } + 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 + }, + hierarchicalRepulsion: { + centralGravity: 0.5, + springLength: 150, + springConstant: 0.01, + nodeDistance: 60, + 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. | +|
| 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 | @@ -2335,8 +2136,14 @@ var options: {Return Type | Description | ||
| getScale() | +Number | +Returns the scale of the network. This can be for animation. This scale is like a percentage, 1.0 = 100%. + Zooming in is > 1.0, zooming out is < 0. Scale cannot be smaller or equal to 0. + | +||
| getSelection() | Array of ids | Returns an array with the ids of the selected nodes. @@ -2345,10 +2152,20 @@ var options: { | ||
| focusOnNode(nodeId, [zoomLevel]) | +focusOnNode(nodeId, [options]) | none | -This function will move the view to center on the specified node. An optional zoomLevel can be passed where 1.0 is 100%, between 0.0 and 1.0 is zooming out and > 1.0 is zooming in. Generally, close to 1.0 is sufficient. - If this argument is not passed the view will only move, not zoom. + | This function will move the view to center on the specified node. An optional options object can submitted where you can define the animation properties. + The options that can be defined are: + scale:Number- to zoom to that scale, + offset:{x:Number, y:Number}- to offset the position from the center of the canvas (in DOM units), + animation: Object || Boolean- to define the specifics of the animation. True is animated with default settings, false is not animated. + + The animation object can consist of: + duration: Number- the duration of the animation in milliseconds, + easingFunction: String- the easing function of the animation, available are: + linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
+ easeInQuart, easeOutQuart, easeInOutQuart,
+ easeInQuint, easeOutQuint, easeInOutQuint |
| 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. | ||||
| moveTo(options) | +object | +This function allows you to programmatically move the view. The options that can be defined are: + position:{x:Number, y:Number}- to move to that position (in canvas units), + scale:Number- to zoom to that scale, + offset:{x:Number, y:Number}- to offset the position from the center of the canvas (in DOM units), + animation: Object || Boolean- to define the specifics of the animation. + + The animation object can consist of: + duration: Number- the duration of the animation in milliseconds, + easingFunction: String- the easing function of the animation, available are: + linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
+ easeInQuart, easeOutQuart, easeInOutQuart,
+ easeInQuint, easeOutQuint, easeInOutQuint + + You will have to define at least a scale or a position. Otherwise, there is nothing to move to. + |
+ ||
| on(event, callback) | none | Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. |
@@ -2447,9 +2284,18 @@ var options: {
||
| zoomExtent() | +zoomExtent([options]) | none | -Scales the network so all the nodes are in center view. | +Scales the network so all the nodes are in center view. Optionally you can supply options for animation. These
+ options can just be a boolean. When true, the zoom is animated, when false there is no animation.
+ Alternatively, you can supply an object.
+ The object can consist of: + duration: Number- the duration of the animation in milliseconds, + easingFunction: String- the easing function of the animation, available are: + linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic,
+ easeInQuart, easeOutQuart, easeInOutQuart,
+ easeInQuint, easeOutQuint, easeInOutQuint
+ |
width: the new width of the canvasdata- attributes to the DOM element of the items.selectable and editable.updateTime or editable.updateGroup are set true.
+ content. See section Templates for a detailed explanation.+ Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML: +
+ +var options = {
+ template: function (item) {
+ var html = ... // generate HTML markup for this item
+ return html;
+ }
+};
+
+
+var options = {
+ template: function (item) {
+ return '<h1>' + item.header + '</h1><p>' + item.description + '</p>';
+ }
+};
+
+
+
+<script id="item-template" type="text/x-handlebars-template">
+ <h1>{{header}}</h1>
+ <p>{{description}}</p>
+</script>
+
+
+Compile the template:
+
+
+var source = document.getElementById('item-template').innerHTML;
+var template = Handlebars.compile(source);
+
+
+And then specify the template in the Timeline options
+
+var options = {
+ template: template
+};
+
+
+
+var templates = {
+ template1: Handlebars.compile(...),
+ template2: Handlebars.compile(...),
+ template2: Handlebars.compile(...),
+ ...
+};
+
+var options = {
+ template: function (item) {
+ var template = templates[item.template]; // choose the right template
+ return template(item); // execute the template
+ }
+};
+
+
+Now the items can be extended with a property template, specifying which template to use for the item.
+
+
Timeline can be localized. For localization, Timeline depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. diff --git a/download/vis.zip b/download/vis.zip index 976eb303..f91ad4cd 100644 Binary files a/download/vis.zip and b/download/vis.zip differ diff --git a/examples/graph2d/12_customRange.html b/examples/graph2d/12_customRange.html index 1416e1af..5dd51eea 100644 --- a/examples/graph2d/12_customRange.html +++ b/examples/graph2d/12_customRange.html @@ -29,7 +29,7 @@ var options = { right: { min:-5 } - }, + } } }; diff --git a/examples/graph2d/13_localization.html b/examples/graph2d/13_localization.html index 301396d4..f249fc6f 100644 --- a/examples/graph2d/13_localization.html +++ b/examples/graph2d/13_localization.html @@ -13,7 +13,7 @@ } - + diff --git a/examples/graph2d/15_streaming_data.html b/examples/graph2d/15_streaming_data.html new file mode 100644 index 00000000..5c64b9ea --- /dev/null +++ b/examples/graph2d/15_streaming_data.html @@ -0,0 +1,123 @@ + + + +
+ + +
+ This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options moveable and zoomable false.
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/examples/graph2d/index.html b/examples/graph2d/index.html index ca5dfe0a..93e7c9bd 100644 --- a/examples/graph2d/index.html +++ b/examples/graph2d/index.html @@ -21,6 +21,7 @@ +
+var moveToOptions = {
+ position: {x:x, y:x}, // position to animate to (Numbers)
+ scale: 1.0, // scale to animate to (Number)
+ offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
+ animation: { // animation object, can also be Boolean
+ duration: 1000, // animation duration in milliseconds (Number)
+ easingFunction: "easeInOutQuad" // Animation easing function, available are:
+ } // linear, easeInQuad, easeOutQuad, easeInOutQuad,
+} // easeInCubic, easeOutCubic, easeInOutCubic,
+ // easeInQuart, easeOutQuart, easeInOutQuart,
+ // easeInQuint, easeOutQuint, easeInOutQuint
+
+| position x | + |
| position y | + |
| scale | + |
| offset x | px | +
| offset y | px | +
| duration | ms | +
| easingFunction | + + | +