使用 d3 javascript 库时在路径上的特定点放置箭头（标记）

Posted 2023-02-23

【中文标题】使用 d3 javascript 库时在路径上的特定点放置箭头（标记）

【英文标题】：Putting an arrow (marker) at specific point on a path when using the d3 javascript library

【发布时间】：2013-04-23 02:02:04

【问题描述】：

我目前正在研究图形可视化，我使用 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

现在我想知道如何将箭头附加到具有相应方向的该位置。更重要的是如何做到这一点，以便在移动关联节点时更新图形的边缘。 我还没有找到任何答案，关于“标记”的示例正在使用路径属性，例如：style('marker-end', "url(#end-arrow)")

【参考方案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);

【讨论】：

这正是我想要的。谢谢;)