title: Attaching 'onclick' event to D3 chart background
body: <p>I have a D3 histogram chart, onto which I have attached an 'onclick' event to the bars:</p>
  
  <pre><code>...
  var bar = svg.selectAll(".bar")
          .data(data)
          .enter().append("g")
          .attr("class", "bar")
          .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
          .on('mouseover', tip.show)
          .on('mouseout', tip.hide)
          .on('click', function(d,i){ //do stuff  });
  ...
  </code></pre>
  
  <p>This works exactly as expected.  I would also like to attach an 'onclick' event to the background of the chart (ie. everywhere in the chart that is not a bar), but I am having trouble with this.  I have tried attaching the event in a couple ways, but in every case, this new event seems to override my bar-click:</p>
  
  <p>Some attempts:</p>
  
  <pre><code>$("svg:not('.bar')").on("click", function(){ //do stuff });
  
  $("g:not('.bar')").on("click", function(){ //do stuff });
  
  var svg = d3.select("#histogram_block").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .on("click", function(d,i){
              if (d) { //do stuff}
              else { //do stuff }
          };
  </code></pre>
  
  <p>I am assuming there is a way to add the event handler to the SVG object when it is initialized, but I don't know the correct way to go about this.</p>