D3.js 如果与另一个元素重叠，则扩展SVG元素

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

当这些圆重叠时，我想把它们渲染得稍微大一点，这样当几个数据点堆积在同一个位置时，就可以看到不同

我发现我可以使用

explate

应用

feMorphology

过滤器，但我需要能够根据同一位置的圆圈数以某种方式缩放膨胀

这里是SVG演示：

---

您可以使用feComponentTransfer/feFuncA完成此类操作。但它只处理完全重叠的点而不是部分重叠的点

它的工作方式是首先以低不透明度渲染圆。因此，在同一点渲染的圆越多，其不透明度越高。然后，过滤器将图像分割成不同的图层，具有不同的不透明度范围。然后对每个层应用不同大小的模糊，然后在模糊圆上增加不透明度，并使用附加模糊添加一点假抗锯齿

这里的诀窍是获得恰好正确的圆的不透明度值，因此它与feFuncA表格值的不透明度范围对齐。您必须提前知道重叠点的最大数量，以便正确校准。（例如，此

tableValues=“0 1 0 0 0”

创建5个不透明度范围0-20%、20-40%、40-60%、60-80%和80-100%。）

这里我想你需要JavaScript。你真的想使用一个<代码> fOfOrthys<代码>过滤器吗？或者你会考虑其他选项，比如玩圆圈的不透明度？你有没有考虑让圆部分透明，所以重叠的圆只是变得更不透明？@ MeHDI也许我可以使用<代码>混合混合模式< /代码>但我不知道这怎么会让圆圈看起来更大。有什么想法吗？@MichaelMullany没有，我们的UI设计需要改变圆圈的大小。哇。这太棒了。非常感谢。