SVGマーカーがD3の強制レイアウトリンクとして使用されているd3.svg対角カーブ上に正しく配置されていない

Question

私はSVGとd3.jsで少し新しいです。

グラフをD3フォースレイアウトで描画しているとき、私は単純な対角線ジェネレータを使用しており、マーカーの端を使って矢印の頭を描いています。

対角ジェネレータの代わりにアークを使用すると、矢印の頭がうまく表示されます。しかし、適切なマーカーを生成しません下記のコードのように斜めの発電機を使用して：

var vis = this.vis = d3.select(el).append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

var force = d3.layout.force() 
    .gravity(0.03) 
    .distance(120) 
    .charge(-800) 
    .size([w, h]); 

var linkDiag = d3.svg.diagonal() 
    .projection(function(d) 
    { 
     return [d.x, d.y]; 
    }); 

vis.append("svg:defs") 
     .selectAll("marker") 
    .data(["normal", "special", "resolved"]) 
    .enter() 
     .append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M 0,-5 L 10,0 L0,5"); 

...そしてまた：

force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }) 
     .attr("d", linkDiag) 
     .attr("marker-end", function(d) { return "url(#special)"; }); 

    }); 

マーカーは頂点に全く重視されていません。

助けていただけたら幸いです！

Answer 1

もう少し質問をすることができますか？ ただしも、あなたは、コード実行していると私は、あなたは問題が

.attr("orient", "auto") 

あなたは矢印を移動しているので、矢印が正しい方向に向いていないされているかのようにのみ表示されますPOS

Answer 2

を指定しようとするかもしれないと思いますrefXとrefYを使用して新しい位置に移動します。

例えば、さまざまな方向に対角線を描くthis codeをチェックしてください。矢頭は180度のものを除いて正しく表示されますが、これはおそらく丸め誤差のためです。

ここで、10行目のrefXを、たとえば5という値に変更してみましょう。今度は、水平に近い矢印が正しく表示されません。これをもっと劇的に見るには、値を8に変更してみてください。

斜め線の一部が隠れているように見えるので、線が早い時点で終了しているように見えます。ポイント。矢頭が大きすぎてカーブの一部をオーバーレイする場合、同じことが起こります。対称ベジェ曲線であるd3の対角線の場合、矢頭は常に完全に水平または垂直を指すように見える必要があることに注意してください。矢尻の不透明度を減らすことによって、何が起こっているのかを正確に見ることができます。