首先我们要明白如何在svg中进行箭头的绘制：
先写一对<defs>，里面再写一对<marker>，其中marker的属性意义为：
| viewBox | 坐标系的区域 |
| refX, refY | 在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写） |
| markerUnits | 标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小） |
| markerWidth, markerHeight | 标识的大小 |
| orient | 绘制方向，可设定为：auto（自动确认方向）和 角度值 |
| id | 标识的id号 |
然后，我们利用d3.js来进行箭头的绘制就清楚多了：
//添加defs标签
var defs = svg.append("defs");
//添加marker标签及其属性
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth",12)
.attr("markerHeight",12)
.attr("viewBox","0 0 12 12")
.attr("refX",6)
.attr("refY",6)
.attr("orient","auto")
//绘制直线箭头
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000")
//绘制直线
var line = svg.append("line")
.attr("x1",50)
.attr("y1",50)
.attr("x2",200)
.attr("y2",400)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.attr("marker-end","url(#arrow)")
//绘制曲线箭头
var curve_path = "M20,70 T80,100 T160,80 T200,90";
var curve = svg.append("path")
.attr("d",curve_path)
.attr("fill","white")
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.attr("marker-mid","url(#arrow)")
.attr("marker-end","url(#arrow)");
在不同的位置绘制的属性如下：
- marker-start ：路径起点处
- marker-mid：路径中间端点处（必须是 path 中间出现的点）
- marker-end ：路径终点处
绘制结果如下：
时间： 2024-11-09 00:59:54