JSFiddle - React, Tailwind, and code Playground

HTML

<p><button class="zoomToggle">Toggle zoom</button></p>

JavaScript

var zoomEnabled;
var body = d3.select("body");
var svg = body.append("svg");
var svgContainer = svg.append("g");
var circle = svgContainer.append("circle")
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r',30)
    .attr('fill', 'red');
var zoom = d3.behavior.zoom().on('zoom', redrawOnZoom);

var zoomToggle = d3.select('.zoomToggle').on('click', toggleZoom);
toggleZoom();

function toggleZoom(){
    zoomEnabled = !zoomEnabled;
    if (zoomEnabled) {
        svg.call(zoom);
    } else {
        svg.on('.zoom', null);
    }
    zoomToggle.node().innerText = 'Zoom is ' + (zoomEnabled ? 'enabled' : 'disabled');
}; 

function redrawOnZoom(){
    svgContainer.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')');
};