title: D3.js padded brush selection
body: <p>I have created a scatterplot with D3.js that will scale the axises and the size of the points based upon the loaded data, meaning the scale of the data and the size of the points can vary wildly from chart-to-chart.  I am trying to use brush selection to select points on the chart whose area falls under the brush selection extent (not just the absolute x-y position of the data point).  So in essence, given two points at the same position, the point with the larger radius would be easier to select.  I am not quite sure how to take the pixel-padding of the point into consideration when performing the brush select.  How do I scale the known pixel value of the point padding to a chart value that can be used when evaluating my selection?</p>
  
  <p>Here is my brush definition:</p>
  
  <pre><code>var brush = svg.append("g")
          .datum(function() { return {selected: false}; })
          .attr("class", "brush")
          .call(d3.svg.brush()
              .x(x)
              .y(y)
              .on("brushstart", function(d) {
                  selectedNodes = {};
              })
              .on("brush", function() {
                  var extent = d3.event.target.extent();
                  dot.classed("selected", function(d) {
                      if (extent[0][0] &lt;= d.x 
                          &amp;&amp; d.x &lt;= extent[1][0] 
                          &amp;&amp; extent[0][1] &lt;= d.y
                          &amp;&amp; d.y &lt;= extent[1][1])
                      {
                          return d.selected = true; 
                      } else {
                          return d.selected = false; 
                      }
                  });
              })
              .on("brushend", function() {
                  d3.select(this).call(d3.event.target);
              }));
  </code></pre>
  
  <p>And the point definition: </p>
  
  <pre><code>var dot = svg.selectAll(".dot")
          .data(data)
          .enter().append("circle")
          .attr("class", "dot")
          .attr("r", function(d,i) { return d.r; }) 
          .attr("cx", function (d, i) {
              return x(d.x);
          })
          .attr("cy", function (d) {
              return y(d.y);
          });
  </code></pre>