如何使用 D3 检测散点图中的重叠点？答案

【问题标题】：How to detect overlapping dots in a scatter plot using D3?如何使用 D3 检测散点图中的重叠点？
【发布时间】：2014-03-22 02:56:04
【问题描述】：

我正在使用 D3 创建散点图，但我注意到几个点在同一个位置重叠。由于每个数据点都是有意义的，所以我想指出那个地方有几个点。所以我认为我需要做的第一件事是检测绘制散点图时是否发生重叠。

我想到的是，当我使用以下代码在 svg 中附加圆圈时，我会将每一对 (cx, cy) 值保留在一个数组中，并且在绘制下一个点时，遍历数组查看该 (cx, cy) 对是否存在，如果存在，则已经存在一个点。而且我可以做一些事情来表明存在重叠。

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

但在我看来，要做到这一点需要大量的计算，我想知道是否有更简单的方法来处理它。

任何建议将不胜感激！谢谢！

【问题讨论】：

你可以看看这个：stackoverflow.com/questions/17093922/…
一种方法是简单地使点部分透明。这样您就可以看到点重叠的位置，因为这部分的透明度会降低。

标签： javascript svg d3.js scatter-plot overlapping

【解决方案1】：

如何创建一个矩阵 m(SX, SY)，其中 SX 和 SY 是二维图的大小。添加新数据点 (cx, cy) 时，将其标记在矩阵条目 m(cx, cy) 中。然后您将知道您在点 (cx, cy) 处的重叠数据点的数量。

【讨论】：

【解决方案2】：

D3js 中使用了几种方法来检测“碰撞”。这些通常遵循部队布局的方法。 d3.layout.force() 另请参阅，d3.forceCollide([radius])。

这个例子展示了基本原理：http://bl.ocks.org/mbostock/3231298

此示例显示了一种检测和移动图形上重叠圆圈的方法：http://bl.ocks.org/ericandrewlewis/dc79d22c74b8046a5512

【讨论】：