D3 SVGの配置矢頭のパス

Question

私はD3を使ってフォースレイアウトネットワークを視覚化しています。私は自分のノード間のエッジに沿って矢印を配置することに問題があります。この図でわかるように、各ノードのプロパティの値に応じてノードのサイズを拡大しています。基本的に私は、ノードを拡大表示するために使用される同じ値に応じて、矢印上の矢印の位置を動的にcaculate /変更するために、ノードを表示させ、ノードと重ならないようにする必要があります。実際に私の矢頭は私のノードの外縁に「触れ」てほしい。誰かがこれを行う方法ですか？これらのコード断片は、私の矢頭の作成方法を示しています。多分別の方法を使うべきでしょうか？

p.s.私は自分のノードの上に矢じりを描くために私の図面の順序に変更することができますが、それは私が望むものではありません。

... 

svg.append("defs").append("marker") 
.attr("id", "arrowhead") 
.attr("refX", 5) /*must be smarter way to calculate shift*/ 
.attr("refY", 2) 
.attr("markerWidth", 6) 
.attr("markerHeight", 4) 
.attr("orient", "auto") 
.append("path") 
    .attr("d", "M 0,0 V 4 L6,2 Z"); 

... 

path.enter() 
     .append("svg:path") 
     .attr("class", function (d) { 
      return "link " + d.type; 
     }) 
     .attr("id", function (d) { 
      return "path_" + d.id; 
     }) 
     .attr("marker-end", "url(#arrowhead)") 
     .transition().duration(8000) 
     .style("stroke-width", stylePathStrokeWidth) 
... 

Answer 1

私はこの質問Align Marker on node edges D3 Force LayoutにMarkの回答に基づいて問題を解決しました。

function tick() { 

// fit path like you've been doing 
path.attr("d", function (d, i) { 
    dr = 550/d.linknum; 
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
    return result; 
}); 

// recalculate and back off the distance 
path.attr("d", function (d, i) { 
    var pl = this.getTotalLength(); 
    //this is the magic 
    var r = d.target.size + 3 * d.size; // Multiply the marker size (3) with the size of the edge (d.size) because the markers are scaling with the edge which they are attached to!! 
    var m = this.getPointAtLength(pl - r); 
    dr = 550/d.linknum; 
    var result = "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + m.x + "," + m.y; 
    return result; 
});