如果与另一个元素重叠，则将SVG元素扩展

Question

我有一个用D3创建的数据图，在其中为每个数据点画了一个圆。

当圆重叠时，我想将它们渲染得稍大一些，以便当多个数据点堆积在同一位置时，您可以看到差异。

我发现我可以将feMorphology应用于dilate过滤器，但我需要能够根据相同位置的圆数以某种方式缩放膨胀。

这里是SVG演示：

<svg width="400" height="120" xmlns="http://www.w3.org/2000/svg">
 <filter id="dilateIfOverlapping">
  <feMorphology operator="dilate" radius="4">
 </filter>
 <g filter="url(#dilateIfOverlapping)">
   <circle cx="60" cy="60" r="30" fill="green" />
   <circle cx="60" cy="60" r="30" fill="green" />
   <circle cx="170" cy="60" r="30" fill="green" />
 </g>
</svg>

这将渲染两个相同大小的圆。我希望第一个更大，因为彼此之间有两个圆圈。

任何想法都可以通过编程方式设置不同的圆半径来实现吗？

我有一个用D3创建的数据图，在其中为每个数据点画了一个圆。当圆重叠时，我想将其稍大一些，以便在多个数据...

Answer 1

您可以使用feComponentTransfer / feFuncA进行这种操作。但它只能处理完全重叠的点与部分重叠的点。

其工作方式是首先以低不透明度渲染圆形。因此，在同一点渲染的圆圈越多，其不透明度越高。然后，滤镜将图像切成具有不同不透明度范围的不同图层。然后，它将不同大小的模糊应用于每个图层，然后在模糊的圆圈上拨出不透明度，并添加一个带有附加模糊效果的假假抗锯齿。