JSFiddle - React, Tailwind, and code Playground

by sarathsaleem

HTML

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

JavaScript

var height = 500;
var width = 500;


//if extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world, and returns this zoom behavior. 
var zoom = d3.zoom()
   .translateExtent([[100, 100], [400, 400]])
    .on("zoom", zoomed);
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body")
        .append("svg")
        .attr("width", height)
        .attr("height", width)
        .append("g")
        
svg.append("rect")
        .attr("x", 100)
        .attr("y", 100)
        .attr("height", 300)
        .attr("width", 300);
           
    var circle = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 20)
        .style("fill", "red")
        
    svg.call(zoom);
    
    function zoomed() {
      circle.attr("transform", d3.event.transform);
    }