JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>

CSS

svg{border:1px solid #333}

JavaScript

var svg = d3.select("body").append("svg:svg")
            .attr("width", 1000)
            .attr("height", 2000)      
            .append("svg:g")
                .call(d3.behavior.zoom().on("zoom", redraw))
            .append("svg:g");

svg.append("svg:rect")
    .attr("width", 200)
    .attr("height", 300)
    .attr("fill", 'green');
console.log(d3.behavior.zoom())
function redraw() {
    var scale =  Math.pow(d3.event.scale,.1);
    var translateY = (300 - (300 * scale))/2;
    var translateX = (200 - (200 * scale))/2;
    
        svg.attr("transform", "translate(" + [translateX,translateY] + ")" + " scale(" +scale+ ")");
    
};