d3 Force：ノード間のリンクがアークであるリンク上のテキストの位置の計算

Question

テキストへのリンクを適用する1つの方法は、テキスト要素にforce.links（）配列を使用し、テキストをリンクの中間点の中央に配置することです。

私は2つのノード間に2つのリンクがあることを明確にするために、中点で曲がるパスとしてレンダリングした双方向リンクを持つノードをいくつか持っています。

これらの双方向リンクでは、テキストを曲げ経路上に正しく配置するように移動します。

これを行うには、リンクの中心点を中心とする円とその中心を通るリンクに対して垂直に走る直線の交点を計算しようとしました。私は原則的にこれが意味をなさないと思うし、半分の作業だと思われますが、どの座標をどのラベルに適用するかを計算することによってどの座標を返すかを明確にはわかりません。ノードを移動してください（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); 
}; 

任意の助けは、上記を修正するか、これが理解されるであろう達成するための別の方法を提案するか次のよう

アーク放電パス上のテキストの座標を算出するための関数です。

ちなみにテキストパスを使用してテキストをリンクしてみましたが、30-40個のノードとリンクを上に表示するとパフォーマンスが良いとは限りません。

更新：上記の機能を修正し、意図したとおりに動作するようになりました。ここで更新フィドル：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