向 D3.js 行添加箭头末端

Question

我正在使用以下小提琴：https://jsfiddle.net/4ovue3s8/12/

我希望节点之间的连接具有箭头末端，如下所示： http: //jsfiddle.net/maxl/mNmYH/2/

我向 svg 添加了一个标记元素，如下所示：

svg.append("defs")
  .append("marker")
  .attr("id", "arrow")
  .attr("markerWidth", 10)
  .attr("markerHeight", 10)
  .attr("refX", 5)
  .attr("refY", 5)
  .attr("orient", "auto")
  .attr("markerUnits", "strokeWidth")
  .append("path")
  .attr("d", "M0,0 L0,6 L9,3 z")
  .attr("fill", "#000");

然后将标记结束属性添加到如下所示的行中：

links = svg.selectAll( "line.link" )
  .data( json.edges )
  .enter().append( "line" )
  .attr( "class", "link" )
  .attr("marker-end", "url(#arrow)")
  .attr("markerWidth", 5)
  .attr("stroke", "#000")
  .attr("stroke-width", 5)
  .style( "stroke", "#000" )
  .style( "stroke-width", 2 );

这不显示任何箭头末端。

如果我将标记结束属性添加到正常行，如下所示：

svg.append("line")
  .attr("x1", 50)
  .attr("y1", 50)
  .attr("x2", 100)
  .attr("y2", 100)
  .attr("stroke", "#000")
  .attr("stroke-width", 5)
  .attr("marker-end", "url(#arrow)");

它显示。

Answer 1

首先为箭头创建一个 def：

svg.append("svg:defs").append("svg:marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr('refX', -20)//so that it comes towards the center.
    .attr("markerWidth", 5)
    .attr("markerHeight", 5)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

代替线创建路径

links = svg.selectAll( "line.link" )
    .data( json.edges )
    .enter().append( "path" )//append path
    .attr( "class", "link" )
    .style( "stroke", "#000" )
    .attr('marker-start', (d) -> "url(#arrow)")//attach the arrow from defs
    .style( "stroke-width", 2 );

最后在tick函数中为路径提供d属性

  links
    .attr( "d", (d) -> "M" + d.source.x + "," + d.source.y + ", " + d.target.x + "," + d.target.y)

工作代码在这里