Javascript 如何使用D3检测散点图中的重叠点?
我正在用D3创建散点图,但我注意到在同一个点上有几个点重叠。因为每个数据点都是有意义的,所以我想指出在那个地方有几个点。所以我认为我需要做的第一件事是在绘制散点图时检测是否有重叠发生 我想到的是,当我使用下面的代码在svg中附加圆时,我会将每一对(cx,cy)值保留在一个数组中,并且在绘制下一个点时,遍历数组以查看该(cx,cy)对是否存在,如果已经存在点的话。我可以做点什么来表明有重叠Javascript 如何使用D3检测散点图中的重叠点?,javascript,svg,d3.js,scatter-plot,overlapping,Javascript,Svg,D3.js,Scatter Plot,Overlapping,我正在用D3创建散点图,但我注意到在同一个点上有几个点重叠。因为每个数据点都是有意义的,所以我想指出在那个地方有几个点。所以我认为我需要做的第一件事是在绘制散点图时检测是否有重叠发生 我想到的是,当我使用下面的代码在svg中附加圆时,我会将每一对(cx,cy)值保留在一个数组中,并且在绘制下一个点时,遍历数组以查看该(cx,cy)对是否存在,如果已经存在点的话。我可以做点什么来表明有重叠 var starterCircle = starterItem.append("circle") .
var starterCircle = starterItem.append("circle")
.attr("class", "dot starter circle-default")
.attr("r", 6)
.attr("cx", function(d) {
if (getXSelectedOption() == "MP") {
return calcMinutesPlayed(d, "x");
}
else {
return xScale(d[getXSelectedOption()]);
}
})
.attr("cy", function(d) {
if (getYSelectedOption() == "MP") {
return calcMinutesPlayed(d, "y");
}
else {
return yScale(d[getYSelectedOption()]);
}
});
但在我看来,这样做需要大量的计算,我想知道是否有更简单的方法来处理这个问题
如有任何建议,将不胜感激!谢谢大家! 创建一个矩阵m(SX,SY)怎么样,其中SX和SY是2d绘图的大小。添加新数据点(cx,cy)时,在矩阵条目m(cx,cy)中标记它。然后,您将知道在点(cx,cy)处的重叠数据点的数量 D3js中使用了几种方法来检测“碰撞”。这些通常遵循部队布局的方法
d3.layout.force()
另请参见,d3.forceCollide([radius])
此示例显示了基本原则:
本例显示了一种检测和移动图形上重叠圆的方法:您可以看看这个:一种方法是简单地使点部分透明。通过这种方式,您将看到点重叠的位置,因为该部分的透明度较低。