title: Adding an event listener to a d3 brush
body: <p>I'm trying to figure out how to make the rectangle created by a d3 brush (the events rectangle, in particular), respond to a click event. Eventually, I'd like to have a single click on this object bring up a menu, but I can't seem to get the rect element to catch the event.</p>
  
  <p>I've tried the following code:</p>
  
  <pre><code>var selector = d3.svg.brush();
  
  var x = d3.scale.linear()
      .range([0,500])
      .domain([0,500]);
  
  var y = d3.scale.linear()
      .range([0,500])
      .domain([0,500]);
  
  d3.select('#myDiv')
      .append('svg')
      .attr('id','mySVG')
      .attr('height',500)
      .attr('width',500)
      .call(selector.x(x).y(y).on('brushend',bindSelect))
  
  function bindSelect(){
      d3.select('#mySVG rect.extent')
          .on('click',function(){alert('hi mom!')})
  }
  </code></pre>
  
  <p><code>bindSelect</code> seems to fire just fine, and successfully select the <code>.extent</code> rectangle, but I'm not getting any response on clicking the rectangle.</p>
  
  <p>The problem seems to be that d3 fires a <code>brushend</code> event when the rectangle is clicked, which I'm guessing stops event propagation somewhere?</p>
  
  <p>Does anyone know how to get around this? My only thought is to create another rect on top of the extents rect on the <code>brushend</code> event, and then use that one to handle click behavior, but it seems like a messy way of doing things.</p>
  
  <p>Also, <a href="http://jsfiddle.net/6VDwb/1/" rel="nofollow">here is a fiddle of the code.</a></p>