如何在svg< line>上使用箭头标记元件？ [英] how to use an arrow marker on an svg <line> element?

问题描述

我需要在d3.js中创建一个箭头，但我发现的是节点图的例子，我需要的只是一个箭头从点A到点B.

I need to create an arrow in d3.js, but all I find are examples with diagrams of nodes, what I need is to simply make an arrow that goes from point A to point B.

我试过，在下面的示例中实现部分代码： http：// bl。 ocks.org/1153292

I tried, implementing part of the code in the following example: 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

But as I mentioned earlier, I do not find the way to create the arrow with a svg:line

非常感谢您能给我的帮助。

greatly appreciate the help you can give me.

推荐答案

如果你的意思是如何在< line>元素上使用箭头标记？，那么你可以这样做：

If you meant 'how do I use an arrow marker on a <line> element?' then here's how you do that:

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

这里有一个完整的示例。请注意， marker-end 是一个css属性，因此您也可以将该部分放在样式表中。

Here's a full example. And note that marker-end is a css property, so you can also put that part in a stylesheet if you want.

如果您想要使用线条绘制标记，则只需添加您需要的任何线作为标记元素的子元素（并确保使用标记的viewBox属性定义的坐标系）。

If you meant you want to draw your marker with lines, then just add whatever lines you need as a child of the marker element (and make sure to use the coordinate system defined by the marker's viewBox attribute).

这篇关于如何在svg&lt; line&gt;上使用箭头标记元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！