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 ;
} });
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>
The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. For all shape elements, except <polyline> and <path> , the last vertex is the same as the first vertex.
<marker> The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path> , <line> , <polyline> or <polygon> element. Markers are attached to shapes using the marker-start , marker-mid , and marker-end properties.
See http://www.w3.org/TR/SVG11/painting.html#MarkerUnitsAttribute.
What you seem to want is markerUnits="userSpaceOnUse"
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With