Question

我正在用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()]);
        }
     });

但在我看来，这需要大量的计算，我想知道是否有更简单的方法来解决这个问题。

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

Answer 1

如何创建矩阵m（SX，SY），其中SX和SY是2d图的大小。添加新数据点（cx，cy）时，请在矩阵条目m（cx，cy）中将其标记下来。然后，您将知道您在点（cx，cy）处的重叠数据点的数量。

Answer 2

D3js中有一些方法用于检测＆＃34;碰撞＆＃34;。这些通常遵循力布局的方法。 d3.layout.force()也看到d3.forceCollide([radius])。

此示例显示了基本原则：http://bl.ocks.org/mbostock/3231298

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

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

2 个答案: