Text Should not overlap with links or nodes

Did you try what I suggested? Please show a small screenshot demonstrating the problem.

Yes I tried but not working.Text is overlapping if more links to nodes.

Like Walter said, try setting the background on your TextBlock to “white”.

Please see my code:

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: true,
			resegmentable: true,
			isLayoutPositioned:false,
			segmentFraction: 0.5,
			layerName: "background"

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

Symbol creation for Alice:

myDiagram.nodeTemplateMap.add("F",  
			$(go.Node, "Vertical",
					{ locationSpot: go.Spot.Center, locationObjectName: "ICON" },
					$(go.Panel, "Horizontal",	  {width:180},
							$(go.Picture, {alignment:new go.Spot(0, 0, 60, 0), desiredSize: new go.Size(30, 30),width: 30, height: 30,margin:1},
									new go.Binding("source","group" ))),
							$(go.Panel,
									{ name: "ICON" },
									$(go.Shape, "Circle",
											{ width: 40, height: 40, strokeWidth: 2, fill: "white", portId: "" }),
											$(go.Panel,
													$(go.TextBlock, {  alignment: go.Spot.Center, margin: 15 }, new go.Binding("text", "age"))
											)
							),
							$(go.TextBlock,{background:"white"},new go.Binding("text", "name")),
							$(go.TextBlock, { visible: false,width: 350 },  new go.Binding("text", "occupation"),new go.Binding("visible", "occupation",
									function(t) { return !!t; })),
							$(go.TextBlock,{margin: 2,wrap: go.TextBlock.WrapFit, isMultiline: true,maxSize:new go.Size(90, 100)},new go.Binding("text", "nodeRemarks"))
	));
	

Genogram Data:

{key: 0, name: "Aaron",s:"FM",age:"29",ux:1,divd:1,relationText:"1=ffffffffffffffffffffff"},
		{key: 1, name: "Alice",s: "F",age:"26"},
		{key: 2, name: "Aaron child 1",s: "M",age:"19",m:1,f:0,nla:1,snla:0,ssnla:1},
		{key: 3, name: "Aaron child 2",s: "M",age:"17",m:1,f:0,la:1,sh:0,ssch:1},
		{ key: 4, name: "Pt child 2",s: "M",age:"39",m:1,f:0},//,ssch:1,sh:0,cs:2,nla:0
		{ key: 5, name: "Pt child 3",s: "M",age:"39",m:1,f:0,ssch:1,sh:0,cs:5,nla:3},
		
		{ key: 6, name: "Pt child 1 wife1",s: "F",age:"28",vir:2,ssch:1,scs:0,cs:2},

Diagram:

Please check the above diagram:
Even I kept background:white, Alice name is not visible.
Please correct me if I am wrong.

You had “Background” spelled correctly in your earlier quoted code, but not in this most recent quoted link template.

Even if I changed to layerName: “Background”, still no changes.

Did you set layerName: "Background" on all of the link templates?

Yes I did not set in all link templates.Now background is displaying white.Thank you very much for your help.

Hi,

I just posted the below screenshot to my user. But they said without breaking links, text should be visible clearly.

Is it possible?

You’ll need to show us a small screenshot or sketch of what you want.

Hi,

Links should not pass the text like below image.In this image, in place of text, links are breaking .

But in the below image links are not passing the text but links are breaking.

Please let me know if need more clarifications.

Is there just one Link that is passing through the “Alice” label? If so, does that Link connect with the “Alice” Node?

Does that Link have Link.routing set to go.Link.AvoidsNodes? Does that “Alice” Node have any property with “avoidable” in its name set to any value?

Hi Walter,

1. Is there just one Link that is passing through the “Alice” label? If so, does that Link connect with the “Alice” Node?
A: Multiple Links and links connected with nodes.

2. Does that Link have Link.routing set to go.Link.AvoidsNodes?
**A:**Yes.
3. Does that “Alice” Node have any property with “avoidable” in its name set to any value?
**A:**No.

Actual requirement is one node will get many links from other nodes. And I am displaying 3 Texts below the node.

  1. Name of the Node/Person
  2. Occupation of Person
  3. Remarks of person

Like below screenshot:

I can pass more links from other nodes to Alice node.This is the requirement with below conditions:

  1. Name,Occupation,Remarks should not overlap with links which are passing to Alice node and all the links connected with the Alice Node.
  2. Or we can pass links that should avoid text like AvoidsNodes.
  3. Links should not break as below :

Most important thing is text should be more visible without breaking the links.
Please let me know if more clarification.

I given the my answers to your Questions. Please check it.

Good morning.

Links that have AvoidsNodes routing will (naturally) avoid crossing over any other nodes. Since your “Alice” and “Software” and “Intelligent” TextBlocks are elements in a Node, they should be avoided along with the rest of the node.

But you didn’t answer my question of whether any of those links are connected with that node. Clearly if you declare that the link should connect with a particular port element then links will route to/from that port and will necessarily cross over any other elements of the node outside of that port. So I’ll ask whether GraphObject.portId has been set to a string on any element within your node and excluding the area covered by the text.

However if those links do not connect with that node, then I have no idea of what is causing that behavior.

By the way, I really think you should not use AvoidsNodes or Orthogonal routing for those additional non-genetic relationships.

Hi Walter,

Actually my users given the below requirements:

  1. Links should not be passing through nodes.
  2. There should not be any unnecessary bends in the genogram on default load
    3.Remarks displayed should not overlap with the nodes or the links on the genogram (i.e. this should be displayed clearly for the user to read). Overlap should be minimized.

Please see the below answers as my way of achieving the above given requirements:

  1. Links should not be passing through nodes.
    A. Used AvoidsNodes routing for all links used in the genogram. So links are not passing to nodes

  2. There should not be any unnecessary bends in the genogram on default load.
    A. If I will use AvoidsNodes routing then bends are displaying like shown in the below figure.

    But they need like below screenshot.

    I can use Normal routing but links are passing inside the nodes. This impacts the 1st requirement.

    I told that this is not possible if we use AvoidsNodes routing. AvoidsNodes routing will give bends to
    avoid the nodes.I told that this is not doable. Please let me know whether my answer is correct or not?

  3. Remarks displayed should not overlap with the nodes or the links on the genogram (i.e. this should be displayed clearly for the user to read). Overlap should be minimized.
    A. This is what we are discussing till now which I posted to you that is in subject name.
    Because of above two reasons ( for requirements. 1 and 2 ), I am using AvoidsNodes routing.
    For node creation with name,occupation and nodeRemarks I used the below code for each node:
    Below code is sample code for one node:

    myDiagram.nodeTemplateMap.add("F",  
			$(go.Node, "Vertical",
					{ locationSpot: go.Spot.Center, locationObjectName: "ICON",avoidable: true },
					$(go.Panel, "Horizontal",	  {width:180},
							$(go.Picture, {alignment:new go.Spot(0, 0, 60, 0), desiredSize: new go.Size(30, 30),width: 30, height: 30,margin:1},
									new go.Binding("source","group" ))),
							$(go.Panel,
									{ name: "ICON" },
									$(go.Shape, "Circle",
											{ width: 40, height: 40, strokeWidth: 2, fill: "white", portId: "" }),
											$(go.Panel,
													$(go.TextBlock, {  alignment: go.Spot.Center, margin: 15 }, new go.Binding("text", "age"))
											)
							),
							$(go.TextBlock,{background:"white"},new go.Binding("text", "name")),
							$(go.TextBlock, { visible: false,width: 60 },  new go.Binding("text", "occupation"),new go.Binding("visible", "occupation",
									function(t) { return !!t; })),
							$(go.TextBlock,{margin: 2,wrap: go.TextBlock.WrapFit, isMultiline: true,maxSize:new go.Size(90, 100)},new go.Binding("text", "nodeRemarks"))
	));
     
       But I don't know why TextBlocks should not avoided.
    ```     
       Each link is connected to the nodes if I mention the node-node relationship. Here connected to nodes means "not using connected points". Just link touching to node. I did not use port anywhere.

      I did not use/set **GraphObject.portId** anywhere in my genogram code.

      These are my answers to your questions.
Please let me know if I missed anything.

OK, this will require some programming. Please read: Space between links of genogram

I’ve done some of the work at: Genogram

Hi Walter,
Thank you for your Help. If I use like above code all the links are combining together and unable to find links.

The above genogram is better than the below it seems:

image

So I am using background:white.

Could you please format your code so that everyone is able to read it? Code Formatting

Could you also select that “Alice” node and show us the screenshot? I’d like to know what that node’s actualBounds are.

Could you show us the minimum case that exhibits the one problem that you are trying to solve? By minimum I mean the minimum number of nodes and the minimum number of links.

You mean to say shall I put my code in the format?