dagre-d3
dagre-d3 copied to clipboard
Custom marker attributes
Any plan to make custom on marker attributes? As I know, currently marker is follow path's style (like stroke-width).
Here is some edge setting option that I'm using.
{
......
style: "stroke-width:"+(value.penWidth*2)+"px; stroke:"+getEdgeColor( value.edgeColor),
stroke: value.penWidth, // added custom value. explain below
arrowheadStyle: "fill: #333; stroke-width:0.5px; stroke:#555;"
};
Since I start using path's stroke-width as dynamic value, It comes with variable size of path, however, It makes much bigger marker.
So I had to change library code like this. If stroke value is bigger than some value, force to its size half of origin.
function normal(parent, id, edge, type) {
var marker = parent.append("marker")
.attr("id", id)
.attr("viewBox", "0 0 10 10")
.attr("refX", 9)
.attr("refY", 5)
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", 8)
.attr("markerHeight", 6)
.attr("orient", "auto");
// added
** if( edge.stroke && edge.stroke > 2) {
marker.attr( "markerWidth", 3)
.attr( "markerHeight", 3)
.attr( "refX", 8);
}**
var path = marker.append("path")
.attr("d", "M 0 0 L 10 5 L 0 10 z")
.style("stroke-width", 1)
.style("stroke-dasharray", "1,0");
util.applyStyle(path, edge[type + "Style"]);
}
But it's only temporary since It's not really right size of marker depend on its path. Any plan to make custom style for marker or to make right size of marker?
Seconded. I would like to have thicker edges without large arrowheads.