Comment tracer une ligne avec une flèche à l'aide de d3.js

J'ai de la difficulté dans le dessin de la ligne avec une flèche à l'aide de d3.js. Je ne vois quelques tutoriels et écrit ce code, mais je viens de voir la ligne sans flèche. Quelqu'un pourrait s'il vous plaît regardez et dites moi où suis-je raté. Merci à l'avance.

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)");

OriginalL'auteur spod | 2016-04-12

  1. 5

    Changer votre marqueur de la création à la suivante:

    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");

    Une fois que vous faites cela, vous verrez une ligne. Vous souhaiterez peut-être utiliser fill au lieu de stroke si vous voulez un rempli en flèche, que vous pouvez obtenir en utilisant le code suivant:

    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");
    Comment pourrait-on régler le positionnement de la marque le long de la ligne? (et la taille du marqueur)?

    OriginalL'auteur JSBob