The graph 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 clustering support.
has <ahref="#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
that the user can use to explore which settings may be good for you. Use configurePhysics as described in the <u><ahref="#PhysicsConfiguration">Physics</a></u> section or by
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.
If no x or y have been supplied, this argument will not do anything.</td>
</tr>
<tr>
<td>allowedToMoveX</td>
<td>Boolean</td>
<td>false</td>
<td>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.</td>
</tr>
<tr>
<td>allowedToMoveY</td>
<td>Boolean</td>
<td>false</td>
<td>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.</td>
</tr>
<tr>
<td>fontColor</td>
<td>String</td>
@ -469,12 +482,26 @@ var edges = [
<th>Description</th>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>no</td>
<td>A HTML color for the edge.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>no</td>
<td>Color for the edge.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>dash</td>
@ -774,6 +801,14 @@ var options = {
the nodes move to a stabe position visibly in an animated way.</td>
</tr>
<tr>
<td>stabilizationIterations</td>
<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>
</tr>
<tr>
<td>width</td>
<td>String</td>
@ -855,13 +890,20 @@ var options = {
<td>Default border color of the node when selected.</td>
</tr>
<tr>
<td>allowedToMove</td>
<td>allowedToMoveX</td>
<td>Boolean</td>
<td>false</td>
<td>If allowedToMove is false, then the node will not move from its supplied position.
If only an x position has been supplied, it is only fixed in the x-direction.
The same holds for y. If both x and y have been defined, the node will not move.
If no x or y have been supplied, this argument will not do anything.</td>
<td>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.</td>
</tr>
<tr>
<td>allowedToMoveY</td>
<td>Boolean</td>
<td>false</td>
<td>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.</td>
</tr>
<tr>
@ -981,12 +1023,26 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td>color</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>The default color of a edge.</td>
</tr>
<tr>
<td>color</td>
<td>String | Object</td>
<td>Object</td>
<td>Colors of the edge. This object contains both colors for the selected and unselected state.</td>
</tr>
<tr>
<td>color.color</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when not selected.</td>
</tr>
<tr>
<td>color.highlight</td>
<td>String</td>
<td>"#848484"</td>
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>dash</td>
@ -1197,8 +1253,8 @@ var options = {
enabled: true,
gravitationalConstant: -2000,
centralGravity: 0.1,
springLength: 100,
springConstant: 0.05,
springLength: 95,
springConstant: 0.04,
damping: 0.09
},
repulsion: {
@ -1239,14 +1295,14 @@ var options = {
<tr>
<td>springLength</td>
<td>Number</td>
<td>100</td>
<td>95</td>
<td>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.</td>
</tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>0.04</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke′s Law. More information is available <ahref="http://en.wikipedia.org/wiki/Hooke's_law"target="_blank">here</a>.</td>
</tr>
<tr>
@ -1371,7 +1427,8 @@ var options: {
* label: new,
* x: x position of click (canvas space),
* y: y position of click (canvas space),
* allowedToMove: true
* allowedToMoveX: true,
* allowedToMoveY: true
* };
*/
var newData = {..}; // alter the data as you want.
@ -1760,6 +1817,13 @@ var options: {
The selections are not ordered.
</td>
</tr>
<tr>
<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.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
@ -1818,7 +1882,7 @@ var options: {
</tr>
<tr>
<td>zoomExtent</td>
<td>zoomExtent()</td>
<td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
josdejong
10 years ago