title: D3 updating brush's scale doesn't update brush
body: <p>What I want to create is a zoomable, brushable timeline in D3 version 3.5.6. For now I'm not using D3's zoom behavior but just two zoom buttons. My problem is the following: When a button is clicked, I update the scale and redraw the axis as well as the brush. For some reason the brush doesn't update the extent rectangle and the handles but just the background. I know that I'm not actually updating the <code>.extent()</code> of the brush. But isn't the brush supposed to update when the scale was changed?</p>
  
  <p>Here's the relevant portion of the code. The rest can be found in <a href="https://jsfiddle.net/azksfjjw/" rel="nofollow noreferrer">this fiddle</a>.</p>
  
  <pre><code>document.getElementById('in').addEventListener('click', zoom.bind(null, .1));
  document.getElementById('out').addEventListener('click', zoom.bind(null, -.1));
  
  function zoom(step) {
    var offset;
  
    zoomScale += step;
  
    if(zoomScale &lt; 1)
      zoomScale -= step;
  
    offset = (zoomScale * width - width) / 2;
  
    // updating the scale
    xScale
      .range([-offset, width + offset]);
  
    // redrawing the brush which doesn't seem to have effect I expected
    brushGroup
      .call(brush);
  
    // redrawing the axis which works fine
    xAxisGroup
      .transition()
      .call(xAxis);      
  }
  </code></pre>
  
  <p>Thanks a lot!</p>