All Brush No Zoom
<p>I'm working with a focus + context d3 visualization. I'm using a path instead of an area chart, which is the example on bl.ocks.org. Unfortunately, I can't get it working properly. I quickly noticed I wasn't the only one who struggled to re-purpose this graph. See this post:</p>

<p><a href="https://stackoverflow.com/questions/17954628/d3-js-focus-context-overflow">D3.js Focus + Context Overflow</a></p>

<p>My brush works, but the zoom for the focus doesn't seem to work. I'm not sure why I haven't solved it after 3 days. I have had a lot of time and a lot of examples so that I could learn from others' mistakes. In the previous post, the url(#clip) was the issue, however, in my chart the issue seems to be more a problem with the brush/zoom function. Another thing that is tripping me up a is that I'm using d3 version 3, so the current example block isn't so easy to infer things from. There are many differences in syntax/function calling in d3 v4. </p>

<p>The infamous bruzh zoom block in d3.v4.js:
<a href="https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172</a></p>

<p>I'm wondering why have so many struggled with this. Maybe we're all just careless, but I'm suspecting there could also be something tricky/subtle going on here.</p>

<p>Can someone post a fiddle or block of a functional zoom for my chart in d3.v3? I'd love to see how you did it.</p>

<p>Here is my block:
<a href="https://bl.ocks.org/diggetybo/f46ebec18dda16bf39f41b9282b5b593" rel="nofollow noreferrer">https://bl.ocks.org/diggetybo/f46ebec18dda16bf39f41b9282b5b593</a></p>

<p>Here is the full screen graph:
<a href="https://bl.ocks.org/diggetybo/raw/f46ebec18dda16bf39f41b9282b5b593/" rel="nofollow noreferrer">https://bl.ocks.org/diggetybo/raw/f46ebec18dda16bf39f41b9282b5b593/</a></p>

<p>Many thanks</p>