IGraph

The central interface IGraph defines the fundamental functionality for working with graph structures. This includes creating and deleting graph elements and querying structural aspects such as adjacency lists. It also supports modifying the geometry of graph elements (their location and size) and their visual appearance. Finally, it provides access to the graph items it contains and dispatches events for all kinds of structural changes.

The graph elements INode, IEdge, ILabel, IPort, and IBend consistently provide read-only views of their data. All graph elements are created using the factory pattern, using the create or add methods on IGraph. These methods not only return the newly created instance but also register the new item properly with the graph and dispatch the proper creation event.

Neither IGraph nor the model item interfaces are intended to be implemented by application programmers. Instead, you should use the implementations provided by yFiles for HTML. In most cases, you just work with the IGraph instance that is provided by the graph property of the GraphComponent class.

To change a graph element’s properties, use the methods defined in IGraph. IGraph is responsible for all changes to the graph model, whether they are structural, geometric, or visual. Consequently, graph element instances can only be created via IGraph’s creation methods.

Accordingly, elements are removed from the graph using the IGraph’s remove method, which removes the items in a consistent order. Before removing an item, all dependent items are removed first. Removed events are dispatched for all items in the order they are removed. For example, when a node is removed, all dependent items (the node’s labels and ports, and the adjacent edges) are removed before the node itself is removed.

All items can be removed at once using the clear method, which results in an empty graph after execution. Like the remove method, clear removes all items in a consistent order, dispatching Removed events for all items in the order they are removed.

As stated above, a graph consists of a node set and an edge set. IGraph provides read-only access to its nodes and edges via the nodes and edges properties. The graph item collections are enumerables which provide a fail-fast enumerator, meaning an enumerator that breaks upon concurrent modifications.

Iterating over nodes

// iterating over nodes
for (const node of graph.nodes) {
  // do something with the node
}

// ES-5 style
graph.nodes.forEach((node, index) => {
  // do something with the node
})

// more verbose non-functional style:
for (const en = graph.nodes.getEnumerator(); en.moveNext(); ) {
  const node = en.current
  // do something with the node
}

// avoiding concurrent modifications: iterate over copy
graph.nodes.toList().forEach((node) => {
  // removing a node will modify graph.nodes
  graph.remove(node)
})

IGraph dispatches a number of events to report all changes to the graph and its items. More information about the graph events can be found in section Reacting to Graph Changes.

IGraph provides default values for properties that are not explicitly specified when a graph item is created. These are provided in the nodeDefaults or edgeDefaults properties. See section Setting Defaults for new Items.

The default implementation of IGraph is the class Graph. An instance of Graph can be created using its default constructor. Also, an instance of Graph is provided by default in the GraphComponent’s graph property.

The Graph Model Nodes