绘制箭头
最后更新于：2022-04-01 20:04:39
在 SVG 绘制区域中作图，在绘制直线和曲线时，常需要在某处添加箭头。本文介绍如何在 D3 中给直线和曲线添加箭头。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/12/401.png)
到目前为止，我们绘制 D3 的图表都是在 SVG 绘制区域内，虽然 D3 也可用 Canvas 或 WebGL 等作图，但 SVG 是最常用的。那么，用 D3 来绘制箭头，先要明白在 SVG 中是怎么绘制的。
## 1. 在 SVG 中定义箭头的标识
定义箭头的标识如下，先写一对 ，里面再写一对 ，其中 marker 的属性的意义为：
| viewBox | 坐标系的区域 |
|-----|-----|
| refX, refY | 在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写） |
| markerUnits | 标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小） |
| markerWidth, markerHeight | 标识的大小 |
| orient | 绘制方向，可设定为：auto（自动确认方向）和 角度值 |
| id | 标识的id号 |
然后在 marker 里绘制图形即可，下面的代码中用 path 绘制了一个箭头的图形。
~~~
~~~
## 2. 在 SVG 中绘制箭头
有了上面的标识，就可以绘制箭头了。下面绘制一条线段，在线段末尾添加箭头：
~~~
';