JSFiddle - React, Tailwind, and code Playground

by Critter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<svg version="1.1" id="gi-svg-parent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" width="100%" height="100%" viewBox="0 0 960 500" enable-background="new 0 0 960 500" xml:space="preserve">
  <g id="gi-svg-child">
    <circle id="item1" fill="#DCDBDB" cx="65" cy="65" r="45"/>
    <circle id="item2" fill="#DCDBDB" cx="895" cy="435" r="45"/>
  </g>
</svg>
<button id="b1">Click to pan and zoom to element in sequence</button>

CSS

body {
  margin: 0;
}

JavaScript

var curStep = 0;
var svgSteps = [
  { id: "item1", zoom: 2 },
  { id: "item2", zoom: 3 }
];

var btn = document.querySelector('#b1');
btn.addEventListener('click', function(e) {
  svgStepper();
});

var svg = d3.select("#gi-svg-parent");
var g = svg.select("#gi-svg-child");

var width = 960;
var height = 500

zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

// SVG element stepper
function svgStepper() {

  var el = d3.select("#"+svgSteps[curStep].id);
  var bbox = el[0][0].getBoundingClientRect();

  var t = d3.transform(el.attr("transform")),
      x = bbox.left + (bbox.width / 2),
      y = bbox.top + (bbox.height / 2);

  var scale = svgSteps[curStep].zoom;

  svg.transition().duration(1000)
      .call(zoom.translate([((x * -scale) + (width / 2)), ((y * -scale) + height / 2)])
      .scale(scale).event);

  // increment to next element
  curStep++;

}