dash-line.
+ The physics system has been overhauled to increase performance. 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 a variable is not supplied, the default value is used.
+var options: {
+ dataManipulation: true,
+ onAdd: function(data,callback) {
+ // fixed must be false because we define a set x and y position.
+ // If fixed is not false, the node cannot move.
+ /** data = {id: random unique id,
+ * label: new,
+ * x: x position of click (canvas space),
+ * y: y position of click (canvas space),
+ * fixed: false
+ * };
+ */
+ 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 +1394,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 +1480,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.| id | + |
| label | + |