Question

I have arrows with different edge thickness however I want the arrowhead (svg marker) to have the same size, i.e., to not be resized according to the path’s stroke width. What can I do?

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")
    .style("stroke-width", 1)
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "aglink " + "suit"; })
    .attr("marker-end", function(d) { return "url(#" + "suit" + ")"; })
    .style("stroke-width", function(d) { if (d.total != 0) { 

        var min = 2;
        var max = 16;
        var val = Math.round((max-min)*(d.count/d.total))+min;

        return val ;
        } });

Answer 1

See http://www.w3.org/TR/SVG11/painting.html#MarkerUnitsAttribute.

What you seem to want is markerUnits="userSpaceOnUse".