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>
 <br> <br> <br>
 <svg id="floor" viewBox="0 0 1400 800" ></svg>

CSS

body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
 
 #floor{
   height:800px;
 }

JavaScript

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

var height = $("#floor").parent().height();
            var width = $("#floor").parent().width();
        
var svg = d3.select("#floor")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", "500 500 4400 2300")
      .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));
  $("#floor").attr("viewBox", "1000 1500 4400 2300")
}