D3 brush scale update does not update brush

Question

What I want to create is a scalable and scalable timeline in D3. At the moment, I do not use D3, but only two zoom buttons. My problem is this: when I click the button, I update the scale and redraw the axis, as well as the brush. For some reason, the brush does not update the degree rectangle and the pen, but only the background. I know that I'm not really updating .extent()brushes. But shouldn't the brush update when zoomed out?

Here is the relevant piece of code. The rest can be found in this violin .

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

-, reset , xExtent yExtent reset. , .

brush.extent(brush.extent());

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

Answer 2

, xScale,

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

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

, , ,

 brushGroup
        .call(brush);

https://jsfiddle.net/azksfjjw/4/

Answer 3

​​ .

:

var brush = d3.brushX().extent([[0, 0], [graph_dim.w, graph_dim.h]]).on("end", brushended);
graphContent.append("g").attr("class", "brush").call(brush);

:

// update graph height 
graph_dim.h = my_new_graph_height;

// update brush extent
brush.extent([[0, 0], [graph_dim.w, graph_dim.h]]);
graphDIV.select(".brush").remove();
graphContent.append("g").attr("class", "brush").call(brush);

, , : -)

NOTE: if you have mouse events on the same chart, they will no longer be available (the brush will “cover” them) - see this answer .