JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<br>
X: <input type="text"  id="xvalue" >
Y: <input type="text"  id="yvalue" >
 <button type="button" onclick="zoomPic()">ZOOM</button>

CSS

body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

JavaScript

var zoom = d3.zoom()
        .on("zoom", zoomed);

        
var svg = d3.select("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .call(d3.zoom().on("zoom", function () {
              svg.attr("transform", d3.event.transform)
      }))
      .append("g")
        
var zoomer = svg.append("rect")
        .call(zoom)
        .call(zoom.transform, d3.zoomIdentity.translate(0, 10).scale(1,1));
 
svg.append("svg:image")
                      .attr('xlink:href', "http://s1.bwallpapers.com/thumbs2/2014/05/09/blue-full-hd-desktop-wallpapers_035116298.jpg")

 
function zoomed() {
        svg.attr("transform", d3.event.transform);
    }
    
function zoomPic(){
 var x = document.getElementById("xvalue").value;
  var y = document.getElementById("yvalue").value;
  svg.call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(1,1));
}