我在 svg 元素中有一个 d3 map (使用 albers 投影),我根据我拥有的每个数据点的纬度和经度向其附加圆圈。然而,一些数据点出现在相同的纬度和经度,因此元素(在本例中为圆圈)被一个接一个地附加。
我想根据同一个纬度/经度投影中是否已经存在一个圆来稍微偏移圆,或者附加另一个元素,例如一个矩形,以表明有多少数据点位于该特定投影上。
但是,我不太清楚我将如何做到这一点。谁能指出我正确的方向?是否有一种干净、简单的方式来表达:如果此位置已经有一个元素,请执行某些操作?
最佳答案
不幸的是,没有简单的方法可以做到这一点——通常,您必须遍历现有元素,检查它们中的任何一个是否与当前元素处于相同的位置。但是,您还有其他一些选择。
预处理数据
在绘图之前,遍历您的数据并在同一位置合并元素。您可以向合并数据添加另一个属性,告诉您使用另一个符号、绘制更大的圆圈或类似的东西。
使用透明度
另一种方法是使圆圈半透明。这样,同一个位置的几个圆圈整体透明度会降低,表明该位置有更多数据。
后一种解决方案最容易实现,因为它只需要设置一个属性。
关于javascript - d3.js:如何处理附加在同一位置的 svg 元素,一个在另一个之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22156496/