How shapes should be in fixed position in genogram?

GoJS
1

Hi Walter,

My requirement is textlable should be displayed at above the links as shown below:

image

In the above diagram, textlable is 12345678901234567890&12345678901234567890 which is displayed at above the links between two nodes.

Below code I am using for links and nodes display:

myDiagram.linkTemplate = 
		$(go.Link,
				{
			//fromEndSegmentLength: 20 ,
			routing: go.Link.AvoidsNodes,
			adjusting: go.Link.End,
			//curve: go.Link.JumpGap,
			 corner: 5,
		     toShortLength: 4,	
			relinkableFrom: true,
			relinkableTo: true,
			reshapable: false,
			resegmentable: true,
		//	isLayoutPositioned:true,
			//segmentFraction: 0.5,
			layerName: "Background"
			

				},
				$(go.Shape, { strokeWidth: 2 })
		);

										}
PathPatterns.add("DivorceCloseAndStrong", $(go.Shape,{geometryString: "M0 18 L1 18  M0 0 L0 0 M0 30 L1 33",fill: "transparent",stroke: "black",strokeWidth: 1,strokeCap: "square"}));

myDiagram.linkTemplateMap.add("DivorceLinkFormat",  
			$(go.Link,  { selectable: false, routing: go.Link.AvoidsNodes,isLayoutPositioned:true  },
					$(go.Shape, 
							{ strokeWidth: 2 },
							new go.Binding("stroke", "patt", function(f) { return (f === "") ? "black" : "transparent"; }),
							new go.Binding("pathPattern", "patt", convertPathPatternToShape)),
							$(go.Shape, {geometryString: "m 0,8 l 14,-8 m -2,8 l 14,-8", width: 20, height: 20, strokeWidth: 2, stroke: "black" }),
							$(go.TextBlock, { margin: -2,alignment: go.Spot.Top,segmentOffset: new go.Point(0, -20)}, new go.Binding("text", "relationText")),
							$(go.TextBlock, { margin: -2,alignment: go.Spot.Top,segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "srelationText"))
			));

if (relationCode == "divh") {
	var remarks_dh = data.dh;
	mdata = { from: key, to: relationNumber, labelKeys: [mlab.key], category: "DivorceLinkFormat", 
        relationText:remarks(relationText,relationNumber,remarks_dh,key),patt: "DivorceHostile", 
        toArrow: "Standard" 
};
model.addLinkData(mdata);

DivorceCloseAndStrong code id ‘divh’.

{key: 0, name: "aaa",s:"FM",divh:1,age:"31",relationText:"1=12345678901234567890&12345678901234567890"},
{key: 1, name: "bbb",s:"F",age:"29",nodeRemarks:"222222222"},

If I will use divh:1 and relationText at key:1 as below :

{key: 0, name: "aaa",s:"FM",age:"31"},
{key: 1, name: "bbb",s:"F",divh:0,age:"29",nodeRemarks:"222222222",relationText:"0=12345678901234567890&12345678901234567890"},

then textlabel is displaying at below the link as shown as the below pic.

image

In the above pic, links are reversing. Hence textlabel is displaying at below the links.It should not happen. textlabel should be displayed at above the links between the nodes.
This is my requirement.Is it possible?
Please let me know if need more details.

Thanks,
Prameela.D

2

Are those two separate links connecting the two nodes in your screenshots? The labels of each link are independent of each other.

The segmentOffset of new go.Point(0, -20) that you specified means that the TextBlock will be located 20 units to the left of the route. Is the link in the last screenshot going in a different direction, from “29” to “31”, whereas the link in the first screenshot had the link going from “31” to “29”? That would explain why the label is below the link path in the second screenshot and above it in the first screenshot.

3

Hi Walter,

Please see my comments for your questions:
Are those two separate links connecting the two nodes in your screenshots?
A. yes.
The labels of each link are independent of each other.
A. yes.
Is the link in the last screenshot going in a different direction, from “29” to “31”, whereas the link in the first screenshot had the link going from “31” to “29”?
A. I don’t know about directions but second screenshot is displaying as in the links opposite direction.Two links are hostile and divorce link between two nodes.
First screenshot showing: divorce link up and hostile link down.
Second screenshot showing : hostile link up and divorce link down.
Links displaying is not an issue but link label should always above the link not bottom.
This is my requirement.
In second screenshot, links are reversing. So that link label also displaying at below the links. This is the problem.

4

If you always want the label of a Link to be above the Link, i.e. at Y coordinates that are smaller than the mid-point of the Link, just set the label’s GraphObject.alignmentFocus, not the segmentOffset:

$(go.TextBlock, "LABEL",
  {
    alignmentFocus: new go.Spot(0.5, 1, 0, 15)
  })
5

Hi Walter,

Thank you for your help. It is working now.
To know the knowledge, can you please explain about

alignmentFocus: new go.Spot(0.5, 1, 0, 15)?

How we can arrange the values like 0.5,1,0,15 inside the spot?

Thanks,
Prameela.D

6

I don’t understand what you are asking for. Maybe this will answer your question:
https://gojs.net/latest/intro/linkLabels.html#LinkLabelSegmentOffsetAndAlignmentFocus

Or maybe:
https://gojs.net/latest/intro/panels.html#Spots