在D3.js做线条时,经常需要画箭头,箭头画法如下:
首先定义箭头标识
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属性的各参数含义:
在线条上应用:
var link=svg.append("g")
.attr("class","links")
.selectAll("line")
.data(data.links)
.enter().append("line")
//应用箭头
.attr("marker-end","url(#arrow)");