javascript - 停止与 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 中，绘图的顺序决定了谁在顶部，谁在底部:就像真正的画家在真正的 Canvas 上涂抹墨水一样，首先绘制的内容留在底部，并且稍后绘制的内容保留在顶部，并且可见。

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

1. 线路选择
2. 圈子的选择
3. 文本的选择。