D3 Examples - d3 fdg with generalised drag and zoom background.

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FDG with zoom(/drag) on background</title>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: #fff;
    }
    .paxis path,
    .paxis line {
      fill: none;
      stroke: #ccc;
    }
    .paxis text {
      fill: #ccc;
    }
    svg {
      outline: 1px solid #282f51;
      pointer-events: all;
      overflow: visible;
    }
​
    g.outline {
      outline: 1px solid red;
    }
​
    #panel div {
      display: inline-block;
      margin: 0 .25em 3px 0;
    }
​
    #panel div div {
      white-space: pre;
      margin: 0 .25em 3px 0;
    }
​
    div#inputDiv {
      white-space: normal;
      display: inline-block;
    }
​
    .node {
      cursor: default;
    }
​
    text {
      font-size: 8px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="panel">
  <div id="inputDiv">
    <input id="update" type="button" value="update">
  </div>
  <div id="wrapAlpha">alpha:
    <div id="alpha"></div>
  </div>
  <div id="fdg">
  </div>
</div>
<div id="viz"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!--<script src="d3 CB.js"></script>-->
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsedtime/elapsed%20time%201.0.js"></script>
<script src="script.js"></script>
​
</body>
</html>
    

d3 fdg with generalised drag and zoom background.

Force directed Graph

Features

Architecture

SVG (background) roles

FDG roles