svg箭頭(轉載https://blog.csdn.net/lzhlzz/article/details/41808231)
阿新 • • 發佈:2021-12-16
在 SVG 繪製區域中作圖,在繪製直線和曲線時,常需要在某處新增箭頭。本文介紹如何在 D3 中給直線和曲線新增箭頭。
到目前為止,我們繪製 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
D3版:http://www.ourd3js.com/demo/J-4.0/arrow.html
謝謝閱讀。
文件資訊
- 版權宣告:署名(BY)-非商業性(NC)-禁止演繹(ND)
- 發表日期:2014 年 12 月 8 日
- 更多內容:OUR D3.JS - 資料視覺化專題站 和 CSDN個人部落格
- 備註:本文發表於 OUR D3.JS ,轉載請註明出處,謝謝