2

Im using d3.js to draw a scatterplot in javascript and this is my first javascript program. The user can draw a click n drag SVGRectangle to calculate the average of the points that get bounded by the rectangle. I have implemented the rectangle drawing part, I'm stuck with the part where I have to determine which points (SVGCircles) are inside the rectangle. Im trying to get all the circle elements in an array allCircles, and then filtering out the circles that are in the rectangle region. However I cannot figure out how to get the coordinates of the circles. The way I did it below doesnt seem to work.

var svg = d3.select("body")
            .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 + ")");

var allCircles = svg.selectAll("circle.circles"); //circles is the class for all points
//I have to do the following line coz for some reason the entire array comes as one single //element
allCircles = allCircles[0]; 

for (var j = 0; j < allCircles.length; j++) {
                if (allCircles[j].top > startY && allCircles[j].left > startX
                    && (allCircles[j].height + allCircles[j].top) < rectHeight + startY
                    && (allCircles[j].width + allCircles[j].left) < rectWidth + startX) {
                    selectedCircles.push(allCircles[j]);
}
}

Any fixes, suggestions, hints, links would be appreciated as Im really short on time !

user1340852
  • 825
  • 3
  • 9
  • 27
  • 1
    related (not duplicate) question: http://stackoverflow.com/questions/18146574/getintersectionlist-from-a-d3-js-html – explunit Sep 27 '13 at 16:52
  • Can you explain how it doesn't work? Do you get any error messages? The D3 way to do it would be to use `.filter()` on your selection BTW. – Lars Kotthoff Sep 27 '13 at 17:08
  • @LarsKotthoff : I think that there is no such thing as allCircles[j].top etc. They appear to be undefined in debug. Coz when I look through the values of all variables during Debug, elements inside the array have a property called "attributes" and all the attributes that I had set earlier are there as an array. .top, .width, .left, .height are not listed as properties of the elements of the array "allCircles" How can I use `filter()` ? – user1340852 Sep 27 '13 at 18:25
  • @explunit : Using the link you suggested, I tried document.getElementByClassName("circles") and it gave me the HTMLCollection[] of all points. So I dont have to do that extra stmt before the for-loop. But how do I get the attributes of each of the points? – user1340852 Sep 27 '13 at 18:28
  • 1
    So have you tried accessing those properties using `.attr()`? – Lars Kotthoff Sep 27 '13 at 18:28
  • `allCircles[j].getAttribute("cx")` works :D Thanks for all your help ! – user1340852 Sep 27 '13 at 18:48
  • I'll add that as an answer with some more explanation for future reference. – Lars Kotthoff Sep 27 '13 at 19:07

1 Answers1

0

When selecting objects with D3, you can't access those attributes directly -- use the .attr() function. That is, instead of allCircles[j].top you would do d3.select(allCircles[j]).attr("top") or allCircles[j].getAttribute("top"). Note that you need to have set those attributes explicitly.

The D3 way to do something like that would be to use the .filter() function on your selection, i.e. something like

svg.selectAll("circle.circles")
   .filter(function(d) { return d.top > startY && /* etc */; })
   .each(function(d) {
     // do something with the selected circles
   });
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204