score:6

Accepted answer

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/

score:0

i had the same problem, and fixed it by deleting the brush group and calling it again.

before graph resizing:

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

after graph resizing:

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

probably not the best way, but it works :-)

note that if you have mouse events on the same graph, they will no longer be accessible (the brush will "cover" them) -- see this answer.

score: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/


Related Query

More Query from same tag