Flavio Flavio - 2 months ago 17
Javascript Question

D3 updating brush's scale doesn't update brush

What I want to create is a zoomable, brushable timeline in D3. 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

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
.range([-offset, width + offset]);

// redrawing the brush which doesn't seem to have effect I expected

// redrawing the axis which works fine

Thanks a lot!


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