d3 fdg with generalised drag and zoom background.

Force directed Graph

Features

1. drag and zoom background surface
2. transition on zoom, instant on drag
3. static axes in pixel (range) units
4. stickable nodes shift-drag or hold down one finger and drag with another drag again to release
5. double click to move a node to the center of the plot surface

Architecture

SVG (background) roles

• create an svg element on the specified selector or element
  • only one svg element for each base element
  • return a subclassed d3 object with data hooked. This is to ensure that container is a reference to the final UPDATE+ENTER selection after data is bound and the element is created. This is required as long as selection.data() returns a new element.
• zoom and pan using d3.behaviour.zoom only
  • pan is instant
  • touch zoom is instant
  • mousewheel zoom is transitioned over 450 ms
  • the current transform status of the container are copied to zoom on zoom start
    this needs to be done once but is done everytime for simplicity. This is to eliminate a jump back to zero before transitioning zoom for the first time.
  • inherit extent and doubleclick behaviour from user defined zoom
    (TODO inherit transform and scale from user zoom, maybe accept user defined zoom)
• methods
  • #.h, #.w inner height and width of the plot surface
  • #.container return the SVG object with and svg element on the specified selector
  • #.zoomTo move the point specified in domain coordinates to the center of the container transition time specified by user
  • #.onZoom, #.onZoomStart user post-hooks for zoom
  • #.translate, #.scale expose zoom transform state

FDG roles

• provide an interface for adding a force directed graph on the provided SVG plot surface
• TBC