我目前正在进行一个图形可视化项目,使用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示例。
现在我想知道如何将箭头附加到该位置并具有相应的方向。 更重要的是,当移动相关节点时,如何更新图的边缘。 到目前为止我还没有找到任何答案,"markers"的示例都是针对路径属性工作的,例如:style('marker-end', "url(#end-arrow)")