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]