Graph API

.ds.graph([options])

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

• layout: Defines the layout used, either manual, automatic, or layered. Defaults to manual layout. Note, that if you use the layered layout, you will need to load Dagre (you can also find it in JSAV/lib/dagre.min.js).
• visible: Boolean to determine if initially the graph is shown or not. Default true.
• center: Boolean to determine if graph should be automatically centered within its container. Defaults to true.
• left/top/right/bottom: Values to determine the absolute position of the graph relative to its container.
• relativeTo: A JSAV data structure object or DOM element that this structure should be positioned relative to. If this option is specified, left and top options will change structure’s position relative to the relativeTo element. Note, that the element pointed by relativeTo needs to be visible.
• anchor: Defines which position on the element being positioned to align with the target element. Should be in format horizontal vertical. Possible horizontal values are “left”, “center”, “right” and vertical values “top”, “center”, “bottom”. Defaults to center center. Only has an effect if relativeTo is specified.
• myAnchor: Similar to anchor, but the position on this element. Defaults to center center. Only has an effect if relativeTo is specified.
• follow: A boolean indicating whether or not this structure should move when the relative element moves. Only has an effect if relativeTo is specified.
• relativeIndex: If relativeTo points to a JSAV array, this option can be used to position this structure relative to an index in that array. Only has an effect if relativeTo is specified.
• width: Width of the graph, in pixels. Defaults to 400.
• height: Height of the graph, in pixels. Defaults to 200.
• directed: Whether or not this graph is directed.

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:

• weight: the weight of the new edge

.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.