32

我需要在 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 非常感谢你能给我的帮助。

4

1 回答 1

60

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"/>

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.

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).

于 2012-10-02T08:24:17.357 回答