dagre d3 zoom

by fredd man

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.4.17/dagre-d3.min.js"></script>
<div class="container">
  <h2>Well</h2>
  <div class="well">
  <button id="zoom_in">+</button>
<button id="zoom_out">-</button>
<svg class="test" width=960 height=400><g/></svg></div>
</div>

CSS

body {
  width: 960px;
  margin: 0 auto;
  color: #333;
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
}

 
section {
  margin-bottom: 3em;
}

section p {
  text-align: justify;
}

svg {
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
    background:white;
}
 
 
 text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node rect {
  stroke: #333;
  fill: #fff;
  stroke-width: 1.5px;
}

.edgePath path {
  stroke: #333;
  stroke-width: 1.5px;
}

table {
  border-spacing: 0;
}

table td {
  padding: 7px;
}

JavaScript

'use strict';
//
// setup Zoom from example http://bl.ocks.org/mgold/f61420a6f02adb618a70
// 
var width = 960,
  height = 400,
  center = [width / 2, height / 2];
//
var svg = d3.select('svg'),
  inner = svg.select('g');
//

var zoom = d3.behavior.zoom()
  .translate([0, 0])
  .scale(1)
  .size([900, 400])
  .scaleExtent([1, 8])
  .on('zoom', zoomed);
//
svg
  .call(zoom) // delete this line to disable free zooming
  .call(zoom.event);

function zoomed() {
  inner.attr('transform', 'translate(' + zoom.translate() + ')scale(' + zoom.scale() + ')');
}

function interpolateZoom(translate, scale) {
  var self = this;
  return d3.transition().duration(350).tween('zoom', function () {
    var iTranslate = d3.interpolate(zoom.translate(), translate),
      iScale = d3.interpolate(zoom.scale(), scale);
    return function (t) {
      zoom
        .scale(iScale(t))
        .translate(iTranslate(t));
      zoomed();
    };
  });
}

function zoomClick() {
  var clicked = d3.event.target,
    direction = 1,
    factor = 0.2,
    target_zoom = 1,
    center = [width / 2, height / 2],
    extent = zoom.scaleExtent(),
    translate = zoom.translate(),
    translate0 = [],
    l = [],
    view = {
      x: translate[0],
      y: translate[1],
      k: zoom.scale()
    };

  d3.event.preventDefault();
  direction = (this.id === 'zoom_in') ? 1 : -1;
  target_zoom = zoom.scale() * (1 + factor * direction);

  if (target_zoom < extent[0] || target_zoom > extent[1]) {
    return false;
  }

  translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
  view.k = target_zoom;
  l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

  view.x += center[0] - l[0];
  view.y += center[1] - l[1];

  interpolateZoom([view.x, view.y], view.k);
}

d3.selectAll('button').on('click', zoomClick);
//
//
//
//  tcp-state-diagram EXAMPLE
//
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// States and transitions from RFC 793
var...