web-dev-qa-db-ja.com

d3.jsを使用して矢印付きの線を描く方法

D3.jsを使用して矢印で線を描くのに問題があります。チュートリアルをいくつか見て、このコードを書きましたが、矢印のない行だけが表示されます。誰かがそれを見て、私がどこにいないのか教えてください。前もって感謝します。

var w = 300;
var h = 300;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

//arrow
svg.append("svg:defs")
  .append("svg:marker")
  .attr("id", "triangle")
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 15)
  .attr("refY", -1.5)
  .attr("markerWidth", 6)
  .attr("markerHeight", 6)
  .attr("orient", "auto");

//line              
svg.append("line")
  .attr("x1", 100)
  .attr("y1", 100)
  .attr("x2", 200)
  .attr("y2", 100)          
  .attr("stroke-width", 1)
  .attr("stroke", "black")
  .attr("marker-end", "url(#triangle)");
javascripthtmld3.js
12
spod

マーカーの作成を次のように変更します。

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 -5 10 10")
    .style("stroke", "black");

これを行うと、線が引かれているのがわかります。塗りつぶされた矢印が必要な場合は、fillの代わりにstrokeを使用することができます。これは、次のコードを使用して取得できます。

svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 6)
    .attr("refY", 6)
    .attr("markerWidth", 30)
    .attr("markerHeight", 30)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0 0 12 6 0 12 3 6")
    .style("fill", "black");
8
JSBob