javascript - d3.js:如何处理附加在同一位置的 svg 元素，一个在另一个之上？

Question

我在 svg 元素中有一个 d3 map (使用 albers 投影)，我根据我拥有的每个数据点的纬度和经度向其附加圆圈。然而，一些数据点出现在相同的纬度和经度，因此元素(在本例中为圆圈)被一个接一个地附加。

我想根据同一个纬度/经度投影中是否已经存在一个圆来稍微偏移圆，或者附加另一个元素，例如一个矩形，以表明有多少数据点位于该特定投影上。

但是，我不太清楚我将如何做到这一点。谁能指出我正确的方向？是否有一种干净、简单的方式来表达:如果此位置已经有一个元素，请执行某些操作？

Answer 1

不幸的是，没有简单的方法可以做到这一点——通常，您必须遍历现有元素，检查它们中的任何一个是否与当前元素处于相同的位置。但是，您还有其他一些选择。

预处理数据

在绘图之前，遍历您的数据并在同一位置合并元素。您可以向合并数据添加另一个属性，告诉您使用另一个符号、绘制更大的圆圈或类似的东西。

使用透明度

另一种方法是使圆圈半透明。这样，同一个位置的几个圆圈整体透明度会降低，表明该位置有更多数据。

后一种解决方案最容易实现，因为它只需要设置一个属性。