title: Converting d3js brush from v3 to v4
body: <p>I'm trying to take Nadieh Bremer's awesome Bar Chart w/ Brush code and update it from d3.js v3 to v4.</p>
  
  <p>I've managed to port over the new scale() and axis() functions but I'm getting tripped up with how to update brush(). I've tried following this previous SO answer but to no avail - <a href="https://stackoverflow.com/a/44431466/4344653">D3.js v3 to v4 Brush changes</a></p>
  
  <p>Can anyone assist me in converting this code to v4?</p>
  
  <p><strong>Nadieh's v3 source code:</strong> <a href="http://bl.ocks.org/nbremer/4c015860931fb6a13afc7bac51f40b43" rel="nofollow noreferrer">Source Code Link</a><br />
  <strong>My v4 attempt:</strong> <a href="https://codepen.io/quirkules/pen/zgBazo" rel="nofollow noreferrer">My Attempt</a></p>
  
  <p>I've already made the following conversions:</p>
  
  <ul>
  <li><code>scale.linear() -&gt; scaleLinear()</code></li>
  <li><code>scale.ordinal().rangeBands() -&gt; scaleBand().rangeRound()</code></li>
  <li><code>d3.behavior.zoom() -&gt; d3.zoom()</code></li>
  <li><code>d3.svg.axis().scale(main_xScale) -&gt; d3.axisBottom(main_xScale)</code></li>
  <li><code>d3.svg.axis().scale(main_yScale) -&gt; d3.axisLeft(main_yScale)</code></li>
  </ul>
  
  <p>But any attempts to change <code>d3.svg.brush()</code> result in error</p>
  
  <pre><code>brush = d3.svg.brush()
        .y(mini_yScale)
        .extent([mini_yScale(data[0].country), mini_yScale(data[brushExtent].country)])
        .on("brush", brushmove)
    //.on("brushend", brushend);
  </code></pre>
  
  <blockquote>
    <p>Cannot read property 'brush' of undefined</p>
  </blockquote>