在D3.js做線條時(shí),經(jīng)常需要畫箭頭,箭頭畫法如下:
首先定義箭頭標(biāo)識(shí)
var defs = svg.append("defs");
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","8")
.attr("markerHeight","8")
.attr("viewBox","0 0 12 12")
.attr("refX","13")
.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","#999");
marker屬性的各參數(shù)含義:
Paste_Image.png
在線條上應(yīng)用:
var link=svg.append("g")
.attr("class","links")
.selectAll("line")
.data(data.links)
.enter().append("line")
//應(yīng)用箭頭
.attr("marker-end","url(#arrow)");