JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
Zoom scale: <span id="scale"></span><br/>
Zoom event: <span id="event"></span>
<div id=plot></div>

CSS

#zoom_pane {
    opacity : 0;
    pointer-events : all;
    cursor : move;
}
#plot {
    margin-top: 20px;
}

JavaScript

var width  = 500;
var height = 150;
var from   = 70;
var to     = 150;
var limits = {
    zoomOut : 100,
    zoomIn  : 10
};
var svg = d3.select("#plot")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(0,20)")
    .append("g");

var pane = svg
    .append("rect")
    .attr("id", "zoom_pane")
    .attr("width", width)
    .attr("height", height)

var xScale = d3.scale.sqrt()

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("top");

var zoom = function() {
    d3.select("#scale").text(d3.event.scale);
    d3.select("#event").text(d3.event.sourceEvent.type)
    update();
};

var update = function() {
    svg.call(xAxis);
}

svg.call(xAxis);
pane.call( d3.behavior.zoom().x(xScale).scaleExtent([((to - from)/limits.zoomOut), ((to - from)/limits.zoomIn)]).on("zoom", zoom) );