如何使用D3在散點圖中檢測重疊點？

我正在用D3創建散點圖，但我注意到幾個點在同一個點重疊。由於每個數據點都有意義，所以我想指出在那個地方有幾個點。所以我認爲我需要做的第一件事是在繪製散點圖時檢測是否有重疊發生。如何使用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()]); 
     } 
    });

但在我看來，這需要大量的計算，我想知道是否有更簡單的方法來處理這個問題。

任何建議將不勝感激！謝謝！

來源

2014-02-20 April Lee

你可以看看這個：http://stackoverflow.com/問題/ 17093922 /如何添加抖動到一個D3 - 陰謀 – Hamatti

這樣做的一種方法是簡單地使點部分透明。通過這種方式，您可以看到點重疊的位置，因爲這部分透明度會降低。 –

如何創建矩陣m（SX，SY），其中SX和SY是二維圖的大小。添加新數據點（cx，cy）時，將其標記在矩陣條目m（cx，cy）中。然後您將知道您在點（cx，cy）處的重疊數據點的數量。

來源

2014-02-20 21:46:38

D3js中有幾種方法用於檢測「碰撞」。這些通常遵循部隊佈局的方法。 d3.layout.force()也見，d3.forceCollide([radius])。

這個例子顯示了基本原則：http://bl.ocks.org/mbostock/3231298

這個例子顯示的方法來檢測並在圖形上移動重疊圓形：http://bl.ocks.org/ericandrewlewis/dc79d22c74b8046a5512

來源

2016-09-20 02:34:49

如何使用D3在散點圖中檢測重疊點？

回答

相關問題