javascript - 領域で囲まれたsvg要素を取得する - javascript

Question

d3.js を使用して JavaScript で散布図を描画しています。これが私の最初の JavaScript プログラムです。ユーザーはクリック アンド ドラッグ SVGRectangle を描画して、四角形に囲まれたポイントの平均を計算できます。長方形の描画部分を実装しましたが、長方形の内側にあるポイント (SVGCircles) を特定する必要がある部分に行き詰まっています。配列 allCircles 内のすべての円要素を取得しようとしてから、四角形領域にある円を除外します。ただし、円の座標を取得する方法がわかりません。以下で行った方法はうまくいかないようです。

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]);
}
}

時間が本当に短いので、修正、提案、ヒント、リンクをいただければ幸いです。