Comment utiliser un marqueur de flèche sur un élément SVG?
Je dois créer une flèche dans d3.js, mais tout ce que je trouve sont des exemples avec des diagrammes de nœuds. Ce dont j'ai besoin, c'est de simplement faire une flèche qui va du point A au point B.
J'ai essayé d'exécution d'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 beaucoup l'aide que vous pouvez me donner.
1 réponses
Si vous vouliez dire ' comment puis-je utiliser un marqueur de flèche sur un élément ?"alors voici comment vous faites cela:
<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, donc vous pouvez également mettre cette partie dans une feuille de style si vous le souhaitez.
Si vous voulez dessiner votre marqueur avec des lignes, ajoutez simplement les lignes dont vous avez besoin en tant qu'enfant de l'élément marker (et assurez-vous d'utiliser le système de coordonnées défini par l'attribut viewBox du marqueur).