title: d3 filtering function not working based on attribute
body: <p>Hey so I cannot seem to figure out this issue. Basically my goal for this predicament is when the item is dragged over the div element I want it to return the element that closely responds with the div element. </p>
  
  <p>I set attributes to the div element in correspondence with its coordinates like so.</p>
  
  <pre><code>chars = grid
              .selectAll("svg")
              .data(data.nodes)
              .enter()
              .append("div")
              .attr("class", "gridData")
              .attr("gridX", function(d) {return d.x})
              .attr("gridY", function(d) {return d.y})
              .on('contextmenu', function () {
                  d3.event.preventDefault()
              }).call(drag);
  </code></pre>
  
  <p>When I use the drag end function I want to grasp the element that corresponds with the coordinates like so.</p>
  
  <pre><code>drag.on('dragend', function(d) {
              var hx = helper.datum().x;
              var hy = helper.datum().y;
              d.x = hx;
              d.y = hy;
              d3.select(this).transition().duration(100).style('left', d.x + 'px').style('top', d.y + 'px')
                  .each('end', function () {
                      helper.remove();
                  });
              if (d.sample === "sample1") {
                  var selection = d3.selectAll(".gridData").filter("gridX", d.x);
                  console.log(selection);
                  d3.select(this).remove();
              }
          });
  </code></pre>
  
  <p>Except my filter function is empty. I cannot figure out why the filter function is empty. The selection all returns an Array of 20 containers that has all the corresponding x and y coordinates. So I figured it should return.</p>