在 SVG 繪制區域中作圖，在繪制直線和曲線時，常需要在某處添加箭頭。本文介紹如何在 D3 中給直線和曲線添加箭頭。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/12/401.png)
到目前為止，我們繪制 D3 的圖表都是在 SVG 繪制區域內，雖然 D3 也可用 Canvas 或 WebGL 等作圖，但 SVG 是最常用的。那么，用 D3 來繪制箭頭，先要明白在 SVG 中是怎么繪制的。
## 1. 在 SVG 中定義箭頭的標識
定義箭頭的標識如下，先寫一對 <defs> ，里面再寫一對 <marker>，其中 marker 的屬性的意義為：
| viewBox | 坐標系的區域 |
|-----|-----|
| refX, refY | 在 viewBox 內的基準點，繪制時此點在直線端點上（要注意大小寫） |
| markerUnits | 標識大小的基準，有兩個值：strokeWidth（線的寬度）和userSpaceOnUse（圖形最前端的大小） |
| markerWidth, markerHeight | 標識的大小 |
| orient | 繪制方向，可設定為：auto（自動確認方向）和 角度值 |
| id | 標識的id號 |
然后在 marker 里繪制圖形即可，下面的代碼中用 path 繪制了一個箭頭的圖形。
~~~
<defs>
<marker id="arrow"
markerUnits="strokeWidth"
markerWidth="12"
markerHeight="12"
viewBox="0 0 12 12"
refX="6"
refY="6"
orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;" />
</marker>
</defs>
~~~
## 2. 在 SVG 中繪制箭頭
有了上面的標識，就可以繪制箭頭了。下面繪制一條線段，在線段末尾添加箭頭：
~~~
<line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/>
~~~
也可以用 path 來繪制：
~~~
<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/>
~~~
在不同的位置繪制的屬性如下：
- marker-start ：路徑起點處
- marker-mid：路徑中間端點處（必須是 path 中間出現的點）
- marker-end ：路徑終點處
## 3. 使用 D3 繪制箭頭
有了上面的內容，在 D3 中如何繪制呢？
先定義箭頭的標識：
~~~
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
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");
~~~
使用上述 marker 繪制箭頭的代碼為：
~~~
//繪制直線
var line = svg.append("line")
.attr("x1",0)
.attr("y1",0)
.attr("x2",200)
.attr("y2",50)
.attr("stroke","red")
.attr("stroke-width",2)
.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)");
~~~
結果圖為本文開始處的圖片，完整代碼為：
SVG版：[http://www.ourd3js.com/demo/J-4.0/arrow.svg](http://www.ourd3js.com/demo/J-4.0/arrow.svg)
D3版：[http://www.ourd3js.com/demo/J-4.0/arrow.html](http://www.ourd3js.com/demo/J-4.0/arrow.html)
謝謝閱讀。
### 文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2014 年 12 月 8 日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝
