Starting from the previous example, this one implements a more complete graph editing tool.
Select a tool to operate on the graph: The pointer only lets the user pan & zoom or drag nodes around. The add node tool opens up a library of node types; click one to add a node of that type to the graph. The add link tool lets the user connect two nodes with a drag gesture from the first to the second one.
Clicking a node or a link always selects it regardless of the current tool. You can press del to remove the current selection.
The example activates and deactivates d3.js’s drag behavior on nodes by using a technique found in this example by Ross Kirsling: Everytime the behavior has to be deactivated, the underlying listeners (mousedown.drag and touchstart.drag) are cleared.
Mouse coordinates are used to move the representation of a new link. The coordinates are retrieved as in this example; Please note that the container passed to d3.mouse has to be a DOM node, not a d3 selection. To obtain a DOM node from a selection, use the selection.node() method (d3 wiki).
To make the text labels unselectable, d3.event.preventDefault() is used in the mousedown handler. For preventing the text to be ever selected at all (for example when dragging from the HTML node library), the CSS property user-select has been set to none (see this link).
There is no support for adding links with touch gestures.
The code is a real mess, and some questionable choices have been made because I ran out of time (like for example inlining the SVG for the tool buttons).