title: How do I create a brush with default size on D3?
body: <p>I am having trouble understanding how brushes/extents work on D3 4.0. I wish to create a brush that I can drag along the Y axis of an svg element, and I want the brush to be already created upon the page loading, I don't want the user to have to drag along the g element to create it. (For example, this example has a brush that is created upon page loading <a href="http://bl.ocks.org/raffazizzi/3691274" rel="nofollow">http://bl.ocks.org/raffazizzi/3691274</a>).</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>var verticalRectangle = d3.select(".svgrectangle")
      .attr("width", 100)
      .attr("height", 500)
    .append("g")
  
  var yBrush = d3.brushY()
  
  verticalRectangle.append("g")
    .attr("class", "brush")
    .call(yBrush);
  </code></pre>
  
  <p>Right now this creates a rectangle which I can create brushes on by dragging inside it, I wish the brush to already be created on the rectangle on load (at the bottom of the rectangle with width of 100 and height of 10). I believe brush.extent() can be used for this, but I'm not sure what the correct argument would be on this case. Many of the examples use D3 3.0 and they use brushes with scales, which I believe is no longer necessary in 4.0 Thank for the help.</p>