Space between links of genogram

GoJS
#1

Hello sirs,

Here in Brazil, our genograms has a different layout. I’m trying to achieve this layout, but with no success. I took the Genogram Example and i’m trying to change it, somethings I already changed, like the connections between mother and father. Now the problem is the connection between son and fathers. The problem is that all the links are going from the same point, they don’t have a space between each links.
I will try to demonstrate in images. Here is the layout of brazilian genogram:

Genogram_symbols.jpg981×268 31.2 KB

And here is the layout that I got:

If anyone can help, i’m not very good with Javascript and is my first time with goJS. Thanks in advance

Text Should not overlap with links or nodes
#2

The normal “Marriage” Link is a straight line going between the spouses. It has a single “LinkLabel” Node that acts as the parent for all of the children that issue from that mating.

I see that you have already changed the link so that its Link.fromSpot and Link.toSpot are go.Spot.Bottom. Presumably you will want to increase the Diagram.layout’s layerSpacing property so there’s more room between the layers. If you want, you can set Link.fromEndSegmentLength and Link.toEndSegmentLength to control the distance down to the horizontal line segment.

Normally that “LinkLabel” Node is tiny – you can see it’s declared to have size 1x1 in its template definition. You can change its GraphObject.fromSpot to be go.Spot.BottomSide. You will want to change the width of that Node dynamically in the GenogramLayout so that it has the same width as the distance between the centers of the mother and father Nodes

Then you’ll want to replace the parent-child Link template to be an instance of a custom Link class that is like the BarLink class used by the Network sample. Replace the “HBar” category with the “LinkLabel” category. (To handle twins, you’ll need to augment the code in the Link.getLinkPoint method override to go to the midpoint X between the twins.)

Finally you’ll need to spread the father and mother nodes far apart in the GenogramLayout. This needs to be done both in the GenogramLayout.add method where it creates the LayoutVertex object for the “LinkLabel” node, and also in GenogramLayout.commitNodes method where it actually positions the mother and father Nodes. This is also the convenient time at which you can change the width of that link’s “LinkLabel” node.