我需要在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
创建箭头的方法
非常感谢你能给我的帮助。
答案 0 :(得分:58)
如果您的意思是“如何在< line>上使用箭头标记?元件?'那你就是这样做的:
<line x1="100" y1="230" x2="300" y2="230"
marker-end="url(#yourMarkerId)" stroke="black" stroke-width="10"/>
这是一个完整的example。请注意marker-end
是一个css属性,因此如果需要,您也可以将该部分放在样式表中。
如果您想要用线条绘制标记,那么只需添加您需要的任何行作为标记元素的子项(并确保使用标记的viewBox属性定义的坐标系)。