如何在SVG <line>元素上使用箭头标记？

Question

我需要在d3.js中创建一个箭头，但我找到的所有示例都是节点图的示例。我只需要简单地从点A到点B绘制一个箭头。

我尝试实现以下示例中的部分代码：http://bl.ocks.org/1153292 这个具体的部分：

svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", "resolved"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

但正如我之前提到的，我找不到使用svg:line创建箭头的方法，非常感激您能给予我的帮助。

- Cristian G

---

SVG中的线段只能从A到B，只有查克·诺里斯能一笔画出箭头。尝试使用折线或路径替代。 - philipp

可能是Arrow triangles on my SVG line的重复问题。 - Ciro Santilli OurBigBook.com

Answer 1

如果您的意思是“如何在

- Erik Dahlström

---

marker-start和marker-end正常工作，但是行的中间部分不起作用...您能否请检查一下https://jsfiddle.net/dqoL07cn/ - dom

@dom 这其实应该是一个新问题，因为这样可以帮助其他人更容易地找到答案。无论如何，中间标记实际上需要有一个中间段，比如三个点的折线。起始标记将是起点，结束标记将是终点，而中间标记将用于所有在终点和起点之间的点上。请参见https://jsfiddle.net/dqoL07cn/2/获取折线解决方案。 - Erik Dahlström