javascript - d3 强制 : Calculating position of text on links where links between nodes are arcs

Question

将链接应用于文本的一种方法是使用文本元素的force.links()数组，并将文本居中于链接的中点。

我有一些带有双向链接的节点，我将它们渲染为在中点弯曲的路径，以确保两个节点之间清楚地存在两个链接。

对于这些双向链接，我想移动文本，使其正确位于弯曲路径上。

为此，我尝试计算以链接中心点为中心的圆与垂直于链接且也穿过其中心的直线的交点。我认为原则上这是有道理的，而且似乎是一半工作，但我不确定如何通过计算交叉点来定义返回哪个坐标以应用于哪个标签，以及当我时如何阻止它们在弯曲链接之间跳跃移动节点(请参阅 jsfiddle - https://jsfiddle.net/sL3au5fz/6/ )。

计算弧形路径上文本坐标的函数如下:

function calcLinkTextCoords(d,coord, calling) {
    var x_coord, y_coord;        
    //find centre point of coords
    var cp = [(d.target.x + d.source.x)/2, (d.target.y + d.source.y)/2];       
    // find perpendicular gradient of line running through coords
    var pg = -1 / ((d.target.y - d.source.y)/(d.target.x - d.source.x));
    // define radius of circle (distance from centre point text will appear)
    var radius = Math.sqrt(Math.pow(d.target.x - d.source.x,2) + Math.pow(d.target.y - d.source.y,2)) / 5 ;       
    // find x coord where circle with radius 20 centred on d midpoint meets perpendicular line to d.
    if (d.target.y < d.source.y) {
        x_coord = cp[0] + (radius / Math.sqrt(1 + Math.pow(pg,2)));
    } else {
        x_coord = cp[0] - (radius / Math.sqrt(1 + Math.pow(pg,2)));
    };
    // find y coord where x coord is x_text and y coord falls on perpendicular line to d running through midpoint of d
    var y_coord = pg * (x_coord - cp[0]) + cp[1];
    return (coord == "x" ? x_coord : y_coord);
};

任何解决上述问题或提出另一种方法来实现此目的的帮助将不胜感激。

顺便说一句，我尝试使用 textPath 将文本与链接对齐，但我发现该方法在显示 30-40 个以上节点和链接时性能不佳。

更新:修改了上述功能，现在可以按预期工作。在这里更新了 fiddle :https://jsfiddle.net/o82c2s4x/6/

Answer 1

您可以计算弦到 x 和 y 轴的投影并将其添加到源节点坐标:

function calcLinkTextCoords(d,coord) {

        //find chord length
        var  dx = (d.target.x - d.source.x);
        var dy = (d.target.y - d.source.y);
        var chord = Math.sqrt(dx*dx + dy*dy);

        //Saggita
        // since radius is equal to chord
        var sag = chord - Math.sqrt(chord*chord - Math.pow(chord/2,2));

         //Find the angles
        var t1 = Math.atan2(sag, chord/2);
        var t2 = Math.atan2(dy,dx);
        var teta = t1+t2;

        var h = Math.sqrt(sag*sag + Math.pow(chord/2,2));

        return ({x: d.source.x + h*Math.cos(teta),y: d.source.y + h*Math.sin(teta)});

    };

这是更新后的JsFiddle