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

这里是一个jsfidle example

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

Answer 1

首先，来自SO的长答案。快速的答案是SVG <markers>

（基本的）简答题：在红点之前稍微过一点，测量斜率并在两点之间划一条线。现在问题被简化为：如何将箭头添加到直线的末尾？使用快速的答案。

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

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