D3 Examples - d3 zoom and pan test

xxxxxxxxxx
 
<!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 gY = svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);
    
    console.log('test', x(2))
    
function zoomed() {
  console.log('test', gX, gY)
  view.attr("transform", d3.event.transform);
//     gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
//   gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}
    */
    
        var   margin = {top: 20, right: 20, bottom: 30, left: 40};
    
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 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>
​
    