d3 javascriptライブラリを使用しているときに、パス上の特定のポイントに矢印（マーカー）を付ける

Question

現在、グラフの視覚化に取り組んでおり、SVGとD3ライブラリを使用しています。グラフの辺の矢頭を線の長さの80％に相当する位置に置くことができるかどうか私のデザイナーから尋ねられました。 getPointAtLengthメソッドを使用して、最初の部分を達成することができました。ここで

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500) 

var path = svg.append("path") 
    .attr("d", "M20,20C400,20,20,400,400,400") 
    .attr("fill", "none") 
    .attr("stroke", "black"); 

var pathEl = path.node(); 

var pathLength = pathEl.getTotalLength(); 

var pathPoint = pathEl.getPointAtLength(pathLength*0.5); 

var point = svg.append("svg:circle") 
    .style("fill", "red") 
    .attr("r", 5) 
    .attr("cx", pathPoint.x) 
    .attr("cy", pathPoint.y); 

は今、私は、対応する向きで、この位置に矢印を付けるCAか疑問jsfidle example

です。より重要なのは、どのようにしてこれを行うことができるので、関連するノードを移動するときにグラフのエッジを更新できるかです。 私は、まだ答えを見つけることができませんでした「マーカー」上の例のようなパスのプロパティを使用して作業している：、スタイル（「マーカーエンド」、「URL（＃エンド矢印）」）

Answer 1

まず長い答えはSOです。速い答えはSVG <markers>

です。（基本的な）短い答え：赤い点の少し前の点をとって、勾配を測定し、2点の間に線を引く。今すぐ問題は単純化されます：どのように直線の終わりに矢印を追加するのですか？クイックアンサーを使用します。

は答えを可視化するために、あなたのコードにこれを追加します -

var pathPoint2 = pathEl.getPointAtLength(pathLength*0.78); 
var point2 = svg.append("svg:circle") 
    .style("fill", "blue") 
    .attr("r", 3) 
    .attr("cx", pathPoint2.x) 
    .attr("cy", pathPoint2.y); 

var slope = (pathPoint.y - pathPoint2.y)/(pathPoint.x - pathPoint2.x); 
var x0 = pathPoint2.x/2; 
var y0 = slope*(x0 - pathPoint.x) + pathPoint.y; 

var line = svg.append("svg:path") 
    .style("stroke","green") 
    .attr("d", "M" + pathPoint.x + "," + pathPoint.y + " L" + x0 +","+ y0);