10

現在、グラフの視覚化に取り組んでおり、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)")

4

1 に答える 1

6

まず、 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);
于 2013-05-03T03:49:42.423 に答える