我使用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]);
}
}
任何修复,建议,提示,链接都会受到赞赏,因为我的时间非常短暂!
答案 0 :(得分:0)
使用D3选择对象时,无法直接访问这些属性 - 请使用.attr()
功能。也就是说,您可以allCircles[j].top
或d3.select(allCircles[j]).attr("top")
代替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
});