title: ScaleBand with Zoom
body: <p>I am currently using D3 v4. My x scale is a scaleBand where I am taking a country name for the display and my y scale is scaleTime. When I am trying to get a new xScale in the zoom function it's throwing an error at rescaleX. I looked at many examples online but all of them either have a linearScale or scaleTime.</p>
  
  <pre><code>var countryArr = ["USA", "UK", "Poland", "Sweden"];
  var firstDay = moment(day).subtract(1, 'days').toDate();
  var lastDay = moment(day).add(1, 'days').toDate();
  
  // define scale
  var yScale = d3.scaleTime().range([0, width]); 
  yScale.domain([firstDay, lastDay]);
  var xScale = d3.scaleBand().range([0, height]);
  xScale.domain(countryArr);
  
  // define zoom
  var zoom = d3.zoom()
      .scaleExtent([1, 1])
      .translateExtent([[margin.left, margin.top], [width, height]])
      .on("zoom", zoomed);
  
  d3.select("#main-canvas").call(zoom);
  
  function zoomed() {
      //console.log(d3.event.transform.y);
      var new_x = d3.event.transform.rescaleX(xScale);  // ERROR at this line
      var new_y = d3.event.transform.rescaleY(yScale); 
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/e57Bu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e57Bu.png" alt="enter image description here"></a></p>