Edges

An edge connects two vertices with each other and is defined by a light-weight object with arbitrary and optional properties.

# graph.connect(vertex1, vertex2)

This method connects two vertices with each other. If either of the vertices is not already existing in the graph, it will be added automatically.

» count = graph.edges().length;
» graph.connect({id: 'foo'}, {id: 'bar'});
» console.log(graph.edges().length - count);
1

An edge has the following properties:

• id – the unique identifier of the edge
• name – an arbitrary string displayed as label of the edge
• source – the source vertex the (outgoing) edge connects to
• target – the target vertex the (incoming) edge connects to
• style – an object defining the style of the SVG element
• type – always the string 'edge'

Edges are directed, thus, an edge connecting vertex A with vertex B is different from one connecting vertex B with vertex A.

» graph.connect({id: 'foo'}, {id: 'bar'});
» console.log(graph.vertices().length);
2
» console.log(graph.edges().length));
1
» graph.connect({id: 'bar'}, {id: 'foo'});
» console.log(graph.vertices().length);
2
» console.log(graph.edges().length);
2

# graph.disconnect(vertex1, vertex2)

» count = graph.edges().length;
» graph.disconnect({id: 'foo'}, {id: 'bar'});
» console.log(graph.edges().length - count);
-1

# graph.connects(vertex1, vertex2 [, direction])

Returns true if the vertex defined by the first argument directly connects to the vertex defined by the second argument – i.e. if vertex1 is a predecessor of vertex2.

With the optional third argument set to any one can force the connection to be of arbitrary direction. If set to both the connection has to be mutual, in both directions.

# graph.edges([edges])

Without the optional argument this method returns the current list of edges available in the graph.

» graph.connect({id: 'foo'}, {id: 'bar'});
» edges = graph.edges();
» console.log(edges.length);
1 
» console.log(edges[0].toString());
"<Edge graph-vertex-foo ==> graph-vertex-bar>"

With the edges argument being a list of edges the method removes any existing edge and processes the list by connecting each source vertex with the desired target vertex of each contained edge. If a vertex is not already existing it will be added to the graph automatically.

» vertex1 = {id: 'foo'};
» vertex2 = {id: 'bar'};
» vertex3 = {id: 'foobar'};
» graph.edges([
↩   {source: vertex1, target: vertex2},
↩   {source: vertex1, target: vertex3}
↩ ]);
» console.log(graph.edges().length);
2
» console.log(graph.vertices().length);
3

# graph.get(spec1, spec2)

Retrieves the edge from the current graph which connects the two vertices described by the arguments spec1 and spec2.

» edge = graph.get({id: 'foo'}, {id: 'bar'});
» console.log(edge.toString());
"[Edge graph-vertex-foo → graph-vertex-bar]"

# edge.toString()

Returns a string representation of the edge.

» console.log(edge.toString());
"[Edge graph-vertex-foo → graph-vertex-bar]"

Events

Each vertex is assigned the graph’s event handler by default which 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, edge) {
  if (event.type === 'click') {
    console.log('edge %s was clicked.', edge.name);
  }
}

The event argument is a D3 event.

For a more generic approach towards handling events, the graph.eventHandler method can be used.