在 SVG 繪製區域中作圖，在繪製直線和曲線時，常需要在某處新增箭頭。本文介紹如何在 D3 中給直線和曲線新增箭頭。

到目前為止，我們繪製 D3 的圖表都是在 SVG 繪製區域內，雖然 D3 也可用 Canvas 或 WebGL 等作圖，但 SVG 是最常用的。那麼，用 D3 來繪製箭頭，先要明白在 SVG 中是怎麼繪製的。

1. 在 SVG 中定義箭頭的標識

定義箭頭的標識如下，先寫一對 <defs> ，裡面再寫一對 <marker>，其中 marker 的屬性的意義為：

然後在 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)");

結果圖為本文開始處的圖片，完整程式碼為：

謝謝閱讀。

文件資訊

• 發表日期：2014 年 12 月 8 日
• 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝