Arrowhead SVG scaling

When using SVG definitions to add arrowheads to your line in D3, use markerUnits and set a stroke-width attribute if you don’t want the arrowhead to scale with the line.

Static arrowhead:

svg.append('defs').append('marker')
        .attr("id", "arrowhead")
        .attr("markerUnits","userSpaceOnUse")
        .attr("viewBox", "0 -5 10 10")
        .attr("refX",32) 
        .attr("refY", -1)
        .attr("markerWidth", 12)
        .attr("markerHeight", 12)
        .attr("orient", "auto")
        .attr("stroke-width",2)
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr('fill','rgb(104, 104, 104)');

Scaling Arrowhead definition

svg.append('defs').append('marker')
        .attr("id",'arrowhead')
        .attr('viewBox','-0 -5 10 10') 
        .attr('refX', 32)
        .attr('refY', -1)
        .attr('orient','auto')
        .attr('markerWidth',12)
        .attr('markerHeight',12)
        .attr('xoverflow','visible')
        .append('svg:path')
        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
        .attr('fill', 'rgb(104, 104, 104)')
 

Thanks to the D3 slack and Eric S for these tips