ff6347

This example demonstrates a simple method of hand-tweaking a force-directed layout. Using d3.behavior.drag, the nodes in this network are made draggable; dragging updates the x and y properties of each node. The resulting graph could then be saved back to a JSON file using JSON.stringify.

ff6347

Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.

ff6347

A force-directed graph using images as nodes, with accompanying text labels.

ff6347

• Click into the drawing area to start the selection frame
• move the mouse to resize the selection frame
• Release the mouse button to resize the selection frame

new features :

• circles are draggable
• circles can be selected (multiple selections possible by pressing CTRL while clicking a circle)
• the selection frame selects all circles within the frame (by pressing CTRL the selected circles will be appended to current selection)
• multiple selected circles will be dragged simultaneous

ff6347

# Install MacTex: http://mirror.ctan.org/systems/mac/mactex/mactex-basic.pkg

$ sudo chown -R `whoami` /usr/local/texlive
$ tlmgr update --self
$ tlmgr install ucs
$ tlmgr install etoolbox

# Install pandoc view homebrew
$ brew install haskell-platform
$ cabal update

ff6347

var sleeper = function(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds) {
      break;
    }
  }
};

ff6347

Drag from an existing node to add a new node or link. Click to select/deselect nodes/links. Hit the DELETE key to remove the selected node or link. Drag to pan. Scroll to zoom.

Built with D3.js.

ff6347

An example of how to combine d3.behavior.drag and d3.behavior.zoom, using stopPropagation to allow the drag behavior to take precedence over panning. Use the mouse to pan by clicking on the background, or drag by clicking on individual dots; you may also use the mousewheel to zoom.

Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.

This example was created in response to a [Stack Overflow quest

ff6347

This example demonstrates how to add and remove nodes and links from a force layout. The graph initially appears with three nodes A, B and C connected in a loop. Three seconds later, node B is removed, along with the links B-A and B-C. At six seconds, node B is reintroduced, restoring the original links B-A and B-C. This example uses the general update pattern for data joins.

ff6347

Click to add nodes! Nodes near the cursor will be linked to the new node.

D3's force layout uses the Barnes–Hut approximation to compute repulsive charge forces between all nodes efficiently. Links are implemented as geometric constraints on top of position Verlet integration, offering greater stability. A virtual spring between each node and the center of the chart prevents nodes from drifting into space.