使用D3 JavaScript库时将在路径上的特定点的箭头（标记）(Putting an arrow

我在一个图形可视化目前正在和我使用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例子

现在我不知道我怎么CA附加一个箭头与对应的方向这个位置。更重要的是我怎么能做到这一点移动相关的节点时，这样我就可以更新图表的边缘。我无法找到任何答案，在“标志”用相同的路径性质工作的例子： 风格（“标记结束”，“URL（＃结束箭头）”）

首先，从长远答案SO 。简单的回答是SVG <标记>

该（基本）答案很简单：取一点一点的红点之前，测量坡度，绘制两点之间的直线。现在的问题简化为：如何箭头添加到直线的结束？使用快速的答案。

添加到您的代码，以可视化的答案： -

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);