在D3.js做線條時,經(jīng)常需要畫箭頭挽荠,箭頭畫法如下:
首先定義箭頭標識
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
在線條上應用:
var link=svg.append("g")
.attr("class","links")
.selectAll("line")
.data(data.links)
.enter().append("line")
//應用箭頭
.attr("marker-end","url(#arrow)");