I am displaying the text below the node as node name. If I indicate the links to the nodes then text is overlaping with links. Text should be clearly visible to user.
Please help me on this.
It’s really hard to help you unless you provide a small screenshot plus an outline of the node template(s) that you are using. To keep things simple, please leave out irrelevant details.
In the above image, highlighted text inside the red box should be visible clearly. I am trying to display the text “Arron” more visible to users, i.e., user should read the text clearly.
Problem is links are overlapping with text.
my javascript code is below:
In the above code, highlighted textblok is for displaying name “Arron”.
How to write the javascript program for the text should not overlapping with links or more visible to read.
Please let me know above details are not clarity.
Good morning. Perhaps you just want to make sure all of the Links are behind all of the Nodes. Would that work for you? If so, just set layerName: "Background" on the Link template(s).
Hi Walter,
Not working if I will set layerName: “Background” on the Link template(s).
See the below 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 })
);Yes, it’s working – every Node, including each node label, will be in front of all Links.
But because the text is black, if the link is black, your eye cannot distinguish the text. So try setting TextBlock.background to “white” or something like that.
But this is the requirement to put text black from my users.
Is there any possibilities that text should not overlap with links?
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.
