D3.js添加箭头

在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属性的各参数含义：

Paste_Image.png

在线条上应用：

var link=svg.append("g")
      .attr("class","links")
      .selectAll("line")
      .data(data.links)
      .enter().append("line")
               //应用箭头
      .attr("marker-end","url(#arrow)");