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

「<line>要素で矢印マーカーを使用するにはどうすればよいですか？」次に、これを行う方法を示します。

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

これが完全な例です。またmarker-end、これはcssプロパティであるため、必要に応じてその部分をスタイルシートに配置することもできます。

マーカーを線で描画する場合は、マーカー要素の子として必要な線を追加するだけです（マーカーのviewBox属性で定義された座標系を使用してください）。

于 2012-10-02T08:24:17.357 に答える