The Graph Model

In yFiles for HTML the graph is centered around interface IGraph. It serves as a comprehensive representation of the mathematical notion of a directed graph and provides geometry as well as rendering support for the items it contains.

In discrete mathematics, a graph is defined by two sets, a node set and an edge set. A node represents any kind of entity and an edge represents a relation between any two nodes. In yFiles for HTML the graph is directed which means that all edges from the edge set have a direction, i.e. a distinct source node and a distinct target node.

Undirected graphs can be modeled as well. For undirected graphs the direction can be seen as extra information which can be ignored, e.g. by choosing a visualization which doesn’t emphasize direction (omitting the arrows).Apart from visualization, direction doesn’t matter most of the time and is mainly relevant for some layout and analysis features.

The yFiles for HTML graph model adds further elements to this concept: labels can be added to nodes and edges to provide text information for these elements. Also, edges do not connect directly to nodes but use so-called ports as linking elements between nodes and edges. Ports can also be used to link edges to other edges. The edge geometry is defined using so-called bends, which are part of an edge.

Nodes and edges of a graph are modeled by interfaces INode and IEdge. The ports that link nodes and edges (or edges to other edges) are defined by interface IPort, the bends that an edge can contain are defined by interface IBend. Finally, interface ILabel defines generic labels for both nodes and edges. The graph itself is modeled by interface IGraph.

A further enrichment for the common graph model is the concept of grouping. Grouping adds a hierarchical structure to a graph by allowing you to put together related nodes: Nodes can have other nodes as parent. Nodes with a common parent are considered as being in a group where the parent node is referred to as the group node. The nodes with the common parent can be referred to as child nodes or children of the parent or group.

Group nodes can also have other group nodes as children, leading to a complex hierarchy. In this hierarchy we refer to non-group nodes (nodes without children) as leaf nodes or leaves. The root of the hierarchy is null.

In the above figure the two nodes 1 and 2 are children of their common parent, the node Group, whereas the nodes 3 and 4 do not belong to that group. Since nodes 3 and 4 don’t have a parent, they can be referred to as top level nodes. One might also call them children of the root where the root is the graph itself.

In an interactive scenario a group node can be used to deal with the set of child nodes as a unit. For example, moving a group node moves all of its children. Additionally, the minimum size of a group node is constrained to the union of the bounds of its children.

An extension to the grouping concept is the concept of folding, i.e. expanding (opening) and collapsing (closing) group nodes. Folding is also supported by yFiles for HTML, see chapter Folding for more details.