javascript - directed - d3 js path

cómo usar un marcador de flecha en un elemento svg<line>?

Question

Necesito crear una flecha en d3.js, pero todo lo que encuentro son ejemplos con diagramas de nodos, lo que necesito es simplemente hacer una flecha que va del punto A al punto B.

Intenté, implementando parte del código en el siguiente ejemplo: http://bl.ocks.org/1153292

esta parte específica:

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

Pero como mencioné antes, no encuentro la manera de crear la flecha con una svg:line

agradezco mucho la ayuda que me puede brindar.

Answer 1

Si quisieras decir "¿cómo uso un marcador de flecha en un elemento de <línea>?" entonces he aquí cómo haces eso:

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

Aquí hay un example completo. Y tenga en cuenta que marker-end es una propiedad css, por lo que también puede poner esa parte en una hoja de estilo si lo desea.

Si quisiste decir que quieres dibujar tu marcador con líneas, simplemente agrega las líneas que necesites como elemento secundario del elemento marcador (y asegúrate de usar el sistema de coordenadas definido por el atributo viewBox del marcador).