Problem with digraph layout and link spacing

GoJS
1

My Digraphlayout is overlapping the link text. I’d like it to be spread out so there is no overlap. Suggestions most welcome.

Screenshot 2021-12-09 at 18.16.34
Screenshot 2021-12-09 at 18.16.34998×712 177 KB 

  layout: $(go.LayeredDigraphLayout, {  layerSpacing:65}),

and

   $(go.Shape,  // the highlight shape,
		         { isPanelMain: false, strokeWidth: 2.5, stroke: "#404e67", name: "HIGHLIGHT" }),
         
		 
		  $(go.Panel, "Auto",  
			   
			   
			   
			   
			   // only shows the link label if is not empty
				new go.Binding("visible", "label", function(s) { if (s) return true; else return false; })	,
			   	
			    $(go.Shape, "RoundedRectangle", { 					
					fill: "#fff",
					width:130, 
					stroke: "lightgray" 
				}),		   
			    $(go.TextBlock,  { 
					textAlign: "center" ,
					wrap: go.TextBlock.WrapDesiredSize ,
					width:120,
					margin:2}, 
					
					new go.Binding("text", "label"))
		     ),
		 
		 
		 
		 
          $(go.Shape,  // the arrowhead
            { toArrow: "Standard", fill: "#404e67", stroke: null, scale: 2 })
        );
2

The easy step of the solution is to increase the LayeredDigraphLayout.layerSpacing value.

For overlapping labels, you might be able to reduce it by overriding LayeredDigraphLayout.commitLinks to stagger the position of the link label of each link. Here’s an example: LayeredDigraphLayout spreading link labels
As with almost all of samples, the complete source code is in the page itself.

1 Like
3

Thank you Walter. I had been using the layerSpacing value and this is giving me a fair solution.

However only some of the links have a label. The nodes are overlapping the link labels in some cases. In other cases the labels nodes are far enough apart. (It’s not a biggie but it would be nice for it to look right).

4

Thank you. It answered my question