block by nitaku 7493693

Graph editing

Full Screen

Use the mouse (or touch) to pan & zoom or drag nodes around. Clicking a node or a link selects it. You can press del to remove the current selection. Press n to add new nodes (you have to click once on the SVG first).

Based on this example.

The code mixes a pan & zoom implementation based on this example by Mike Bostock with a node drag behavior (see the d3.js wiki). For unknown reasons, this implementation behaves correctly only with the provided version of d3, while it acts strangely with the latest one. It also does not work with touch input.

To implement keyboard input, suitable keyCodes values have been produced by using this jsFiddle.

The code is somewhat disorganized, and it reacts very badly when trying to change something or add new features…

index.js

index.html

index.coffee

index.css

index.sass