title: d3.js: limit size of brush
body: <p>Is there a way to limit the size of a brush, even though the extent is larger?</p>
  
  <p>I put together a brush with only an x-scale that can be moved and resized. I would like to be able to limit the extent to which it can be resized by the user (basically only up to a certain point).</p>
  
  <p>In the following example, the brush function stops updating when the brush gets bigger than half the maximum extent. The brush itself, though, can still be extended. Is there a way to prevent this from happening? Or is there a better way of handling this?</p>
  
  <p>Many thanks!</p>
  
  <p>See this code in action here: <a href="http://bl.ocks.org/3691274" rel="noreferrer">http://bl.ocks.org/3691274</a> (<strong>EDIT</strong>: This demo now works)</p>
  
  <pre><code>bar = function(range) {
  
        var x_range = d3.scale.linear()
            .domain([0, range.length])
            .range([0, width]); 
  
        svg.selectAll("rect.items").remove();
  
        svg.selectAll("rect.items")
            .data(range)
          .enter().append("svg:rect")
            .attr("class", "items")
            .attr("x", function(d, i) {return x_range(i);})
            .attr("y", 0)
            .attr("width",  width/range.length-2)
            .attr("height", 100)
            .attr("fill", function(d) {return d})
            .attr("title", function(d) {return d});
  }
  
  var start = 21;
  bar(data.slice(0, start), true);
  
  var control_x_range = d3.scale.linear()
      .domain([0, data.length])
      .range([0, width]); 
  
  controlBar = svg.selectAll("rect.itemsControl")
      .data(data)
    .enter().append("svg:rect")
      .attr("class", "itemsControl")
      .attr("x", function(d, i) {return control_x_range(i);})
      .attr("y", 110)
      .attr("width",  width/data.length-2)
      .attr("height", 20)
      .attr("fill", function(d) {return d});
  
  svg.append("g")
      .attr("class", "brush")
      .call(d3.svg.brush().x(d3.scale.linear().range([0, width]))
      .extent([0,1*start/data.length])
      .on("brush", brush))
    .selectAll("rect")
      .attr("y", 110)
      .attr("height", 20);
  
  function brush() {
      var s = d3.event.target.extent();
  
      if (s[1]-s[0] &lt; 0.5) {
          var start = Math.round((data.length-1)*s[0]);
          var end = Math.round((data.length-1)*s[1]);
  
          bar(data.slice(start,end));
      };
  
  }
  </code></pre>