D3 updating brush's scale doesn't update brush

Question

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 .extent() of the brush. But isn't the brush supposed to update when the scale was changed?

Here's the relevant portion of the code. The rest can be found in this fiddle.

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 < 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);      
}

Thanks a lot!

Answer 1

Apparently you need to reset the brush's extent, so the internal xExtent and yExtent variables are reset. Seems like a bug to me.

brush.extent(brush.extent());

https://jsfiddle.net/azksfjjw/6/

Answer 2

I caught the problem in your zoom function you re define xScale range as

 xScale
    .range([-offset, width + offset]); 

After this you need to pass it here

brush = d3.svg.brush()
          .x(xScale) // This need new Values 
          .extent([.1, .6]),

Than after you can call to re draw your time line

 brushGroup
        .call(brush);

here the fiddle https://jsfiddle.net/azksfjjw/4/