dagre-d3 icon indicating copy to clipboard operation
dagre-d3 copied to clipboard

Custom marker attributes

Open kdh6429 opened this issue 8 years ago • 1 comments

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.

image

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?

kdh6429 avatar Jan 29 '16 02:01 kdh6429

Seconded. I would like to have thicker edges without large arrowheads.

agg23 avatar Aug 21 '18 23:08 agg23