【 D3.js 进阶系列 — 4.0 】 绘制箭头

在 SVG 绘制区域中作图，在绘制直线和曲线时，常需要在某处添加箭头。本文介绍如何在 D3 中给直线和曲线添加箭头。

 

到目前为止，我们绘制 D3 的图表都是在 SVG 绘制区域内，虽然 D3 也可用 Canvas 或 WebGL 等作图，但 SVG 是最常用的。那么，用 D3 来绘制箭头，先要明白在 SVG 中是怎么绘制的。

1. 在 SVG 中定义箭头的标识

定义箭头的标识如下，先写一对 <defs> ，里面再写一对 <marker>，其中 marker 的属性的意义为：

viewBox	坐标系的区域
refX, refY	在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
markerUnits	标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）