我目前正在图形可视化工作,我使用SVG和D3库.我被设计师问我是否可以将图形边缘的箭头放在对应于线长度的80％的位置上.
我可以通过使用getPointAtLength方法来实现第一部分 – 获取位置.
我可以通过使用getPointAtLength方法来实现第一部分 – 获取位置.
var svg = d3.select("body").append("svg")
.attr("width",960)
.attr("height",500)
var path = svg.append("path")
.attr("d","M20,20C400,20,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
现在我想知道我如何将箭头附加到这个位置上,并具有相应的方向.更重要的是如何做到这一点,所以我可以在移动关联的节点时更新图形的边缘.
我没有找到任何答案,“标记”上的例子正在使用路径属性,如：style(‘marker-end’,“url(#end-arrow)”)
解决方法
首先,从
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);
