I am currently working with an SVG that contains text positioned in the center of a large circle, connected to two smaller circles by a line.
The formula I am using to obtain the line coordinates is as follows:
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))}
For the circle and text nodes, the code looks like this:
<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>
https://i.sstatic.net/j7jhF.png
I am looking for a solution to prevent the lines from overlapping with the text by starting them from the edges of the circle instead of the center. Any advice on how to achieve this would be greatly appreciated. Thank you in advance.