現在、グラフの視覚化に取り組んでおり、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);
これがjsfidleの例です
ここで、対応する向きでこの位置に矢印をどのように取り付けることができるのだろうか。さらに重要なのは、関連するノードを移動するときにグラフのエッジを更新できるようにする方法です。まだ答えを見つけることができませんでした。「マーカー」の例は次のようなパス プロパティで動作しています: style('marker-end', "url(#end-arrow)")