如何在 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创建箭头的方法非常感谢你能给我的帮助。

Answer 1

如果你的意思是"我如何在<line>元素？'那么你是怎么做到的：

<line x1="100" y1="230" x2="300" y2="230" 
marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>

这是一个完整的例子。注意，marker-end是一个css属性，所以如果需要，也可以将该部分放在样式表中。

如果您想用线绘制标记，那么只需添加所需的任何线作为标记元素的子元素(并确保使用标记的viewBox属性定义的坐标系)。