SVG - Marker (arrowheads or polymarkers)

Static

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <polyline points="10,90 50,80 90,20" fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)" />
  
</svg>

where:

• SVG - View Box
• SVG - Path
• SVG - Polyline

D3

var width = 120, height = 120;

var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox","0 0 120 120");

// Generation of the same marker
// but with differents Id ("Triangle", "licensing", "resolved")
// to apply different styles
svg.append("defs").selectAll("marker")
        .data(["Triangle", "licensing", "resolved"])
        .enter().append("marker")
        .attr("id", function(d) { return d; })
        .attr("viewBox", "0 0 10 10")
        .attr("refX", 1)
        .attr("refY", 5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M 0 0 L 10 5 L 0 10 z");

svg.append("polyline")
     .attr("points","10,90 50,80 90,20")
     .attr("fill", "none")
     .attr("stroke","black")
     .attr("stroke-width","2")
     .attr("marker-end","url(#Triangle)");