d3.js——箭头的绘制

首先我们要明白如何在svg中进行箭头的绘制：

先写一对<defs>，里面再写一对<marker>，其中marker的属性意义为：

viewBox	坐标系的区域
refX, refY	在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
markerUnits	标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）
markerWidth, markerHeight	标识的大小
orient	绘制方向，可设定为：auto（自动确认方向）和 角度值
id	标识的id号

然后，我们利用d3.js来进行箭头的绘制就清楚多了：

//添加defs标签
var defs = svg.append("defs");
//添加marker标签及其属性
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")
//绘制直线
var line = svg.append("line")
.attr("x1",50)
.attr("y1",50)
.attr("x2",200)
.attr("y2",400)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.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)");

在不同的位置绘制的属性如下：

marker-start ：路径起点处
marker-mid：路径中间端点处（必须是 path 中间出现的点）
marker-end ：路径终点处

绘制结果如下：