JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

<h3>d3 v4 Zoom Experimentation</h3>
<p>After timeout of 2 seconds apply transform, that shrinks view.  After timeout of 4 seconds use d3.zoomIdentity to reset view to original transform.</p>
<p>Note: zoom is enabled on the view element as we call zoom on view.  Hit f12 to see the start, zoom, end events fired.</p> 

<svg width="500" height="500"> </svg>

CSS

.view {
  fill: blue;
  stroke: #000;
}

JavaScript

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var zoom = d3.zoom()
    .on("start", zoomStarted)
    .on("end", zoomEnded)
    .on("zoom", zoomed);

var view = svg.append("rect")
    .attr("class", "view")
    .attr("x", 0.5)
    .attr("y", 0.5)
    .attr("width", width)
    .attr("height", height);
//call zoom, enables zooming of view element. Transform will be applied after timeout
view.call(zoom);
//after 2 seconds apply new transform on element
setTimeout(function() {
  var transform = d3.zoomIdentity.translate(100, 50).scale(1);
  view.transition().duration(1000).call(zoom.transform, transform);
}, 2000);
//after 4 seconds apply d3.zoomIdentity which sets the transform to be as defined on element 

setTimeout(function() {
  view.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);
}, 4000);

function zoomStarted() {
  console.log('zoomStarted() - transform ' + d3.event.transform.toString());
}
function zoomEnded() {
  console.log('zoomEnded() - transform ' + d3.event.transform.toString());
}
function zoomed() {
  console.log('zoomed() - applying transform ' + d3.event.transform.toString());
  //below is actually applying the transform, comment it out and observe!! 
  view.attr("transform", d3.event.transform);
}