The Graph Model

In yFiles for HTML, the graph is centered around the interface IGraph. It serves as a comprehensive representation of the mathematical concept of a directed graph and provides geometry and 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 an entity, and an edge represents a relation between two nodes. In yFiles for HTML, the graph is directed, which means that all edges have a direction, with a distinct source node and a distinct target node.

Undirected graphs can be modeled as well. For undirected graphs, the direction can be treated as extra information that can be ignored. For example, you can choose a visualization that doesn’t emphasize direction by omitting the arrows.Apart from visualization, direction is often not important and is mainly relevant for some layout and analysis features.

The yFiles for HTML graph model adds labels to nodes and edges to provide text information for these elements. Edges connect to nodes via ports, which act as linking elements. Ports can also link edges to other edges. The edge geometry is defined using 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 their parent. Nodes with a common parent are considered to be 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, creating a complex hierarchy. In this hierarchy, non-group nodes (nodes without children) are leaf nodes or leaves. The root of the hierarchy is null.

In the above figure, nodes 1 and 2 are children of their common parent, the node Group, whereas 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. You 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 treat 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 combined bounds of its children.

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