Genogram layout question

GoJS
1

Hi,

I have replaced the data in the Genogram sample with some of my own which is only slightly more complicated and have a couple of problems with the layout,

This is my code,
http://foodfortheflock.org.allium.arvixe.com/gen1.html

which looks like this,

gen.png1600×850 66.5 KB

Firstly on the right hand side of the diagram, the link lines overlap so making the tree unclear. This can be easily solved by adding some width to the line below, here i have added an arbitrary 100
vertex.width = 100+ spouseA.actualBounds.width + this.spouseSpacing + spouseB.actualBounds.width;

and the result is:

gen 2.png1600×850 63.2 KB

which solves the problem but it has done it by making the widths larger but zooming out on the diagram as a whole, whereas i would like it to have the diagram same size but a scrollbar appear to scroll it left to right as happens on the simple family tree demo, but although have tried different methods and setting large widths on the myDiagramDiv etc, i can’t seem to achieve this?

Second question; on the left hand side of the diagram over lapping lines again make it ambiguous … it could be drawn much better like this ( i rearranged the nodes my hand)

how should be.png1600×850 64 KB

i tried rearranging the input data but it always draws it the same, so is there any way to give it hints on how to optimally layout the tree when done dynamically?

failing this, is there a way to at least stop the lines overlapping so the tree can be read simply,
e.g. this would suffice (i just lifted the two nodes and it s now clear despite the crossing).
i cant put a fourth image in, but lifting nodes Mr B and Mrs B makes it clear.

Thanks a lot for any help or suggestions.

2

I suggest that you change the value of Diagram.initialAutoScale to be go.Diagram.UniformToFill.

Implementing an “optimal” layout for these kinds of diagrams, especially involving non-tree-like partnerships, is difficult. That includes trying to give the layout hints about how you would like the results to be. Someday we intend to completely reimplement GenogramLayout, but that is off in the future, so for now you’ll have to muddle through. Sorry.

I’m a bit surprised that the horizontal line segments from different marriages are co-linear and thus overlapping in some cases. LayeredDigraphLayout does explicitly try to automatically offset the vertical positions of those segments in order to improve readability. That requires some investigation.

3

Thanks … interestingly I just tried it with the new beta version and some of the problems were solved as per how you said it should work. Though equally a couple of things don’t now work quite as perfectly as before. screenshot below.

1.7 beta.png1600×850 74.8 KB

4

That’s not right – does the routing improve if you disable layout animation?

        "animationManager.isEnabled": false
5

Changing that didn’t have any affect … but if you move the nodes which have the problem (a -s1 and a-s1-w1) with the mouse then it immediately fixes itself.

6

Thanks for reporting the link discrepancy in 1.7 Beta. It’s been fixed and will be out with the next release.