Accepted answer

I believe I have a working version of what you're looking for:

You were close on the implementation. I'll explain what I changed to make it work.

First, I attached scales to the zoom function. This is important as d3 will automatically update them as you zoom in and out. It's important to note that I did not use your identity scales. If you use an identity scale d3 zoom behavior will not update the scale. Here are the scales that I created that are identical to yours when there is no zoom:

var x_scale = d3.scale.linear().domain([0, chartWidth]).range([0, chartWidth]);
var y_scale = d3.scale.linear().domain([0, chartHeight]).range([0, chartHeight]);

Now the brush also takes scales as parameters. This is where you mistakenly put the original identity scales. So even though the graph was zoomed and panned you used the same scale to map points to the newly zoomed graph.

In order to feed the brush the correct scales, you can access the zoom behavior's scales by calling: zoom.x() or zoom.y().

Once you've done this the rest is gravy.

Note: I hacked the code a bit so I could access your zoom function in toggleBrushing by making it a global variable. I don't recommend keeping it this way, but I didn't want to do heavy refactoring. Good luck, hope that helps!

Related Query