d3 zoom and pan test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
  <style>
    svg  {
      background: powderblue;
    }
    .axis path {
  display: none;
}

.axis line {
  stroke-opacity: 0.3;
  shape-rendering: crispEdges;
}

button {
  position: absolute;
  top: 20px;
  left: 510px;
}
    
    body {
      background: purple;margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  
  <button>Reset</button>
  
  <svg width="600" height="500"></svg>
  
  <script src="test.js"></script>
   
  <script>
    
 /*   console.log('test..', data)
    
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var view = svg.append("rect")
    .attr("class", "view")
    .attr("x", 0.5)
    .attr("y", 0.5)
    .attr("width", width - 1)
    .attr("height", height - 1);
    
    
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);
    
    y.domain([0,40]);
    x.domain(data.map((d,i) => i));
    
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("width", x.bandwidth())
    .attr("height", (d) => y(d.min) - y(d.max))
    .attr('y', (d) =>  y(d.max))
  	.attr('x', (d, i) => x(i))
    .attr("fill", 'blue');
    
    svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

var xAxis = d3.axisBottom(x)
    .ticks((width + 2) / (height + 2) * 10)
    .tickSize(height)
    .tickPadding(8 - height);

var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);
    
    var gX = svg.append("g")
    .attr("class", "axis axis--x")
    .call(xAxis);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var zoom = d3.zoom()
    .scaleExtent([1 / 2, 4])
    .translateExtent([[-100, -100], [width + 90, height + 100]])
    .on("zoom", zoomed);

// var x = d3.scaleLinear()
//     .domain([-1, width + 1])
//     .range([-1, width + 1]);

// var y = d3.scaleLinear()
//     .domain([-1, height + 1])
//     .range([-1, height + 1]);

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1).domain(data.map((d,i) => i));
    var y = d3.scaleLinear().rangeRound([height, 0]).domain([0,40]);
        
var xAxis = d3.axisBottom(x)
    .ticks((width + 2) / (height + 2) * 10)
    .tickSize(5)
   // .tickPadding(8 - height);

var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);

var gX = g.append("g")
    .attr("class", "axis axis--x")
    .call(xAxis);

var gY = g.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);

d3.select("button")
    .on("click", resetted);
    
  var bars =  g.selectAll("rect.bar")
    .data(data)
  .enter().append("rect").attr('class', 'bar')
    .attr("width", x.bandwidth())
    .attr("height", (d) => y(d.min) - y(d.max))
    .attr('y', (d) =>  y(d.max))
  	.attr('x', (d, i) => x(i))
    .attr('fill-opacity', .65)
    .attr("fill", 'blue');

svg.call(zoom);

function zoomed() {
//   bars.attr("transform", d3.event.transform);
//   gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
  var newScaleY = d3.event.transform.rescaleY(y);
  console.log(newScaleY);
  
  gY.call(yAxis.scale(newScaleY));
 
 
  bars
    .attr("height", (d) => (newScaleY(d.min) - newScaleY(d.max)))
    .attr('y', (d) =>  newScaleY(d.max));  
}

function resetted() {
  svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity);
}

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js