Control

# graph.clear()

Removes all vertices and their edges from the graph and stops any running layout.

# graph.root([vertex])

Setter and getter method for the root vertex.

Without the optional argument this method defines a vertex as root of the graph.

If the vertex specification defines a vertex already defined in the graph, it will become the new root vertex. Otherwise, the vertex is added to the graph.

There can be only one root vertex at any time. Any subsequent call redefines both, the current root vertex (i.e. turns it back into a generic vertex) and the new root vertex.

The root vertex always appears fixed as well as horizontally and vertically centered in the graph.

» graph.root({id: 'foo'});
» graph.root();
"<Vertex graph-vertex-foo: 0 incoming, 0 outgoing>"

# graph.reduce([degree])

Removes vertices from the graph according to their all-degree.

// Removes all vertices not connected with any other vertex (singletons)
» graph.reduce();
// Removes all singleton vertices or vertices connected with only one other vertex
» graph.reduce(1);
// Removes all singleton vertices or vertices connected with less than 4 other vertices
» graph.reduce(3);

# graph.width([width])

This method either returns the graph’s current width or updates it with a new value.

# graph.height([height])

This method either returns the graph’s current height or updates it with a new value.

# graph.center()

Returns the current center of the graph.

» graph.center();
{
  x: 400,
  y: 300
}

# graph.select(vertex)

Returns the D3 object for a given vertex.

» d3element = graph.select(graph.root());
» d3element.node();
<g class="vertex enter root" id="graph-vertex-1" transform="translate(400,300)rotate(0)skewX(0)scale(1,1)">…</g>

# graph.start()

Starts the graph and all its layouts.

# graph.stop()

Stops the graph and all its layouts.

# graph.freeze()

Freezes the graph, i.e. the fixed property of all vertices is set to true.

# graph.eventHandler()

The graph’s event handler is called for the following event types:

• click
• dblclick
• mousedown
• mouseout
• mouseover
• mouseup

In a simple incarnation such a function could look like this:

function (event, target) {
  if (target.type === 'edge' && event.type === 'click') {
    console.log('edge %s was clicked.', edge.name);
  }
}

The event argument is a D3 event.

For a more specific approach towards handling events, vertices and edges can be fitted with individual event handlers.

# graph.data()

An object container for arbitrary data.

» graph.data('foo', 'bar');
» console.log(graph.data('foo'));
"bar"

# graph.on(eventName, handlerFunction)

The handler method for events dispatched by the graph during the start-refresh-stop lifecycle.

Correspondingly, the handler names are start, stop and refresh.

» graph.on('refresh', function() {
↩   if (graph.alpha < 0.05) {
↩     graph.stop();
↩   }
↩ });

# graph.import()

Imports vertices and edges from a text-based format. Current supported formats are GraphViz’s dot and Pajek.

» graph.import('strict digraph { Foo Bar Foo -> Bar}', 'dot');
» console.log(graph.count());
2

# graph.debug([boolean])

En/disables debug mode or returns the current setting of the debug mode.

» graph.debug();
false
» graph.debug(true);
» graph.debug();
true

With enabled debug mode additional visual aid is added to the graph, e.g. bounding boxes.

# debug.element

Returns the SVG element used in debug mode for adding visual aid.

# graph.toString()

Returns a textual representation of the graph.

» graph.toString();
"[Graph: 800x600, 42 vertices]"