在d3 - 强制图中停止与文本属性重叠的行吗？

Question

我有以下svg，它在一个较大的圆圈中间有文字，并且用一条线连接到另外两个较小的圆圈。

线坐标通过以下公式获得：

        x1={Math.max(radius, Math.min(height - radius, link.source.x))}
        y1={Math.max(radius, Math.min(width - radius, link.source.y))}
        x2={Math.max(radius, Math.min(height - radius, link.target.x))}
        y2={Math.max(radius, Math.min(width - radius, link.target.y))}

，圆和文本节点获得如下：

<circle r="100"
            transform={translate(
                        ${Math.max(100, Math.min(height - radius, source.x))},
                        ${Math.max(100, Math.min(width - radius, source.y))}}/>
            <text dx="-20"
                        transform={translate(
                        ${Math.max(100, Math.min(height - radius, source.x))},
                        ${Math.max(100, Math.min(width - radius, source.y))})}>sometext</text>

如何阻止线条从圆心开始并从圆的边缘开始，以防止文本重叠？

非常感谢任何帮助。提前谢谢。

Answer 1

SVG中没有z-index或类似内容。在SVG中，绘图的顺序决定了谁留在最顶层以及谁走到了底部：就像一个真正的画家在真实画布上放置墨水一样，第一个的画面仍然在底部，什么是以后留在顶部，它是可见的。

由于您没有共享代码，因此这是一般解决方案：在脚本中，更改附加元素的选择顺序，因此它们按以下顺序显示：

1. 线条＆＃39;选择
2. 圈子＆＃39;选择
3. 文字＆＃39;选择。