Remarks
Besides the organic graph arrangement, this algorithm enables to immediately visualize changes made to a graph. Changes can be read back and the layout will be locally updated. That way, live interactions with an adapting graph layout are possible. Another advantage is that it is not necessary to compute a completely new layout if only small changes were made.
Layout Style
This algorithm supports the organic layout style which is characterized by a natural distribution of nodes. It is well suited to exhibit clusters and symmetric properties of a graph. Nodes are placed in a space-saving manner and distances between neighbors are highly uniform. Edges maintain uniform lengths too and are routed with straight-line segments without bends.
Organic diagrams are well suited for visualizing relations in large networks, for example, in bioinformatics, enterprise networking, social networks visualization, mesh visualization or system management.
Concept
The internal basis for computing actual layouts is a force-directed approach placing the nodes of the input graph. The graph is modeled as a physical system with appropriate forces acting on it. Nodes are considered as electrically charged particles with mutually repulsive forces. Edges are modeled as forces that attract adjacent nodes. A good diagram is obtained from an equilibrium state of the system, i.e., the nodes are rearranged based on the physical forces until the system reaches a (local) minimum of the sum of the forces.
Importantly, changes will not be automatically applied to the input graph. To commit updates, it is required that a InteractiveOrganicNodeHandle for each node is provided in a mapper registered with key NODE_HANDLE_DATA_KEY. The algorithm will then write positions into the handle instance, which must then be manually transferred to the actually displayed graph (e.g. as part of an animation that transfers positions regularly).
Features
Several update methods on the InteractiveOrganicNodeHandle allow to indicate lightweight changes on the graph, for example, setCenter for node location updates. These updates will be scheduled and executed at a specific point within the life-cycle of the layout algorithm. They are ideally suited for usage in interactive scenarios, where users, for example, change node positions in the displayed graph via mouse-dragging.
Usage Hints
Start the algorithm using startLayout. Furthermore, it is strongly recommended to start it by passing a copy of the original graph as argument to the mentioned method.
Default Values of Properties
| Name | Default | Description |
|---|---|---|
| compactnessFactor | 0.4 | |
| defaultPreferredEdgeLength | 50 | |
| preferredNodeDistance | 50 | |
| qualityTimeRatio | 1 | |
| shapeConstraint | ShapeConstraint.NONE | No area restriction is imposed. |
See Also
Developer's Guide
Members
Constructors
Creates a new instance of the InteractiveOrganicLayout with default settings.
Parameters
Properties
Smaller values result in less compact drawings, greater values result in more compact drawings.
The compactness value needs to lie in [0,1].
0.4 may lead to components drifting away from each other.Property Value
[0,1]Throws
- Exception ({ name: 'ArgumentError' })
- if the specified value is outside the interval
[0,1]
Default Value
Sample Graphs
0This default preferred edge length is used when there is no specific preferred edge length defined for an edge via layout data property preferredEdgeLengths,
This length does not define the actual absolute length of edges, but the layout algorithm considers the specified preference where possible.
The preferred edge length needs to be non-negative.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the specified edge length is negative
Default Value
Sample Graphs
40See Also
Developer's Guide
API
- preferredEdgeLength
Gets the time when the last wake-up, that is, call to wakeUp occurred.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the specified minimum node distance is negative
Default Value
Sample Graphs
40See Also
Developer's Guide
The larger the ratio, the better the quality of the resulting layout but the longer it may take to perform the layout calculation.
The value needs to lie within [0,1].
Property Value
0.0 (low quality, fast) and 1.0 (high quality, slow)Throws
- Exception ({ name: 'ArgumentError' })
- if the specified ratio is outside the interval
[0,1]
Default Value
See Also
Developer's Guide
Gets or sets an shapeConstraint which restricts the area for the layout result of this algorithm.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the given restriction is
null
Default Value
Sample Graphs
See Also
Developer's Guide
API
- ShapeConstraint
Property Value
true if this algorithm is currently sleeping, false otherwiseSee Also
Developer's Guide
API
- wakeUp
Gets or sets the preferred stop duration that this algorithm is allowed to run.
Property Value
Throws
- Exception ({ name: 'ArgumentError' })
- if the specified duration has a negative value
Default Value
See Also
Developer's Guide
Methods
Starts the layout calculation, continuing from where it has stopped before and allowing a certain maximum duration.
Parameters
- duration: TimeSpan
- the duration the layout calculation is allowed to run
See Also
Developer's Guide
Returns an instance of LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> that can be used to perform item-specific configurations for the InteractiveOrganicLayout.
LayoutExecutor type is available at runtime.Parameters
- graph?: IGraph
- The graph that determines the generic type arguments of the created layout data
Return Value
- InteractiveOrganicLayoutData
- An instance of layout data that can be used to perform item-specific configurations for the given GenericLabeling.
Starts the layout calculation for the given period of time.
Parameters
- graph: LayoutGraph
- the input graph
- duration: TimeSpan
- the duration the layout calculation is allowed to run
See Also
Developer's Guide
See Also
Developer's Guide
API
- stopped