web-dev-qa-db-fra.com

Comment utiliser un marqueur de flèche sur un élément <line> SVG?

J'ai besoin de créer une flèche dans d3.js, mais je ne trouve que des exemples avec des diagrammes de nœuds. Ce dont j'ai besoin, c'est de faire simplement une flèche qui va du point A au point B.

J'ai essayé d'implémenter une partie du code dans l'exemple suivant: http://bl.ocks.org/1153292

Cette partie spécifique:

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

Mais comme je l'ai mentionné plus tôt, je ne trouve pas le moyen de créer la flèche avec un svg:line apprécie énormément l'aide que vous pouvez m'apporter.

javascriptd3.jssvggraphics
30
Cristian G

Si vous vouliez dire "comment utiliser un marqueur fléché sur un élément <line>?" voici comment procéder:

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

Voici un exemple complet . Et notez que marker-end est une propriété css, vous pouvez donc aussi mettre cette partie dans une feuille de style si vous le souhaitez.

Si vous vouliez dessiner votre marqueur avec des lignes, ajoutez simplement les lignes dont vous avez besoin en tant qu'enfant de l'élément marqueur (et assurez-vous d'utiliser le système de coordonnées défini par l'attribut viewBox du marqueur).

58
Erik Dahlström