D3.js: Combining Zoom/brush

I'm currently working off of Mike Bostock's Brush & Zoom example although instead of having an overlayed rect object over the svg, I have it attached to my chart so that I can

Solution 1:

You've taken away the rectangle which was used to zoom the chart in your example, but you haven't replaced all of its functionality.

While you call zoom on some other element (presumably your area graph), you don't update that zoom when brushing here:

svg.select(".zoom").call(zoom.transform, d3.zoomIdentity.scale(width / (selection[1] - selection[0]))
    .translate(-selection[0], 0));

You need to assign the zoom class to your chart, otherwise this is an empty selection (or a selection of an irrelevant element). Without doing this, the brush changes don't modify the zoom's scale and translate, which means brushing and then zooming will result in a "jump along the brush", losing where you were.

With that change you should be able to get this working: example.