Graph API

.ds.graph([options])

This function of a JSAV instance initializes an empty graph. Options that the optional parameter can specify:

The returned graph instance is modified through a collection of methods explained next. In addition, the graph has the common functions such as .id(), .css(...), .show(), and .hide().

.addNode(value, [options])

Adds a new node with value to the graph. Returns the new node.

.removeNode(node, [options])

Removes the given node.

.addEdge(fromNode, toNode, [options])

Adds edge from fromNode to toNode. Returns the new edge. Supported options:

.removeEdge(fromNode, toNode, [options])

Removes edge from fromNode to toNode.

.removeEdge(edge, [options])

Removes the given edge.

.hasEdge(fromNode, toNode)

Returns true if the graph has an edge from fromNode to toNode.

.getEdge(fromNode, toNode)

Returns the Edge object connecting fromNode and toNode, or undefined if no such edge exists.

.nodes()

Returns an iterable array of nodes in the graph. The returned structure can be used as a normal JavaScript array. In addition, it has methods .next(), .hasNext(), and .reset() for iterating over the values.

.nodeCount()

Returns the number of nodes in the graph.

.edges()

Returns an iterable array of edges in the graph. The returned structure is similar to the one returned by .nodes().

.edgeCount()

Returns the number of edges in the graph.

.clear()

Removes the DOM element of this structure from the document. This is useful, for example, in re-initializing exercises when the existing structure needs to be removed.

.layout()

This function (re)calculates the layout for the graph. Note, that the library does not do this automatically. That means that after changing the graph, you should call this manually at the end of each animation step.

Events

There are functions to attach event handlers for the nodes and edges in the graph. The events that can be listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. See the tree documentation for details.

Graph Node API

A node in a graph has the same functions as a tree node: .value([newValue]), .highlight()/unhighlight(), .show()/.hide(), and .css(...). In addition, it has the following functions.

.neighbors()

Returns an iterable array of the nodes that this node is connected to.

.edgeTo(node)

Returns the Edge object connecting this node to the given node. Returns undefined if no such edge exists.

.edgeFrom(node)

Returns the Edge object connecting the given node to this node. Returns undefined if no such edge exists.