2

我使用 d3.js 在 javascript 中绘制散点图，这是我的第一个 javascript 程序。用户可以通过单击 n 拖动 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]);
}
}

任何修复、建议、提示、链接将不胜感激，因为我的时间真的很短！

4

1 回答 1

0

使用 D3 选择对象时，您无法直接访问这些属性 - 使用该.attr()功能。也就是说，而不是allCircles[j].top你会做d3.select(allCircles[j]).attr("top")or allCircles[j].getAttribute("top")。请注意，您需要明确设置这些属性。

做这样的事情的 D3 方法是.filter()在您的选择上使用该功能，即类似

svg.selectAll("circle.circles")
   .filter(function(d) { return d.top > startY && /* etc */; })
   .each(function(d) {
     // do something with the selected circles
   });
于 2013-09-27T19:11:02.927 回答