d3.js:如何处理被附加在同一位置的svg元素,一个在另一个上面?

时间:2014-03-03 20:16:40

标签: javascript jquery svg d3.js

我在svg元素中有一个d3地图(使用阿尔伯特投影),我根据每个数据点的纬度和经度附加圆圈。但是,有些数据点出现在相同的纬度和经度上,因此元素(在本例中为圆圈)将被一个在另一个上面。

我想根据圆是否已经存在于相同的纬度/长度投影中来略微偏移圆圈,或者附加另一个像矩形的元素来演示在该特定投影中有多少数据点。

然而,我无法弄清楚我会怎么做。谁能指出我正确的方向?有没有一个干净,简单的方式说:如果这个位置已经有一个元素,那么做点什么?

1 个答案:

答案 0 :(得分:2)

遗憾的是,没有简单的方法可以做到这一点 - 通常,您必须迭代现有元素,检查它们中的任何元素是否与当前元素处于相同位置。但是你有其他一些选择。

预处理数据

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

使用透明度

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

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