Flavio Flavio - 16 days ago 6
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

.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

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/

Comments