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)");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容