d3.js繪製箭頭
阿新 • • 發佈：2019-02-09
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 中繪製箭頭
有了上面的標識，就可以繪製箭頭了。下面繪製一條線段，線上段末尾新增箭頭：
[javascript] view plaincopy
- <line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/>
也可以用 path 來繪製：
[javascript] view plaincopy
-
<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 中如何繪製呢？
先定義箭頭的標識：
[javascript] view plaincopy
- 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 繪製箭頭的程式碼為：
[javascript] view plaincopy
- //繪製直線
- 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)");
結果圖為本文開始處的圖片，完整程式碼為：