documentationfor yFiles for HTML 2.6

InteractiveOrganicLayout

This algorithm arranges graphs in an organic fashion and offers special functionality to interact with the graph while the algorithm is running.

Inheritance Hierarchy
InteractiveOrganicLayout
Implemented Interfaces

Remarks

Besides the organic graph arrangement, this algorithm enables to immediately visualize changes made to a graph. Changes can be committed 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.

Organic layout obtained using this algorithm

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.

Features

Several update methods 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 via mouse-dragging.

Method addStructureUpdate allows to schedule a custom event handler instance that is executed in a synchronized context and can safely update the structure of the graph.

Usage Hints

It is easiest to start the algorithm using startLayout. Furthermore, it is strongly recommended to start it by passing a copy of the original graph (i.e. a CopiedLayoutGraph instance) as parameter to the mentioned method.

Importantly, changes will not be automatically applied to the input graph. Updates can be scheduled via various methods (e.g. setCenter). The whole layout will then internally be adjusted accordingly and changes are stored as intermediate results. Such intermediate results can be committed in order to apply them to the actual graph.

Default Values of Properties

compactnessFactor0.4
outputRestrictionNONENo area restriction is imposed.
preferredEdgeLength50
preferredNodeDistance50
qualityTimeRatio1

Type Details

yfiles module
layout-organic
yfiles-umd modules
layout-multipage, layout-organic, layout
Legacy UMD name
yfiles.organic.InteractiveOrganicLayout

See Also

For the mere use case of generating an organic layout of a graph without the need for special interaction, it is recommended to use OrganicLayout instead of this class.

Constructors

Properties

Methods