Double tree layout for family relationship

GoJS
1

Hello,
I want to achieve something like below

For this i have used the double tree structure with the code mentioned below
// create the model for the double tree
myDiagram.model = new go.TreeModel([
// these node data are indented but not nested according to the depth in the tree
{ key: “Sean Lewis”,name:“Sean Lewis”, source: “images/HS6.png”},
{ key: “Greg Lewis(Father)”,name:“Greg Lewis(Father)”, parent: “Sean Lewis”, source:“images/HS15.png”},
{ key: “Eve Wymann (Step Mother)”,name:“Eve Wymann (Step Mother)”, parent: “Greg Lewis(Father)”,source:“images/HS7.png” },
{ key: “Susan Lewis”, name:“Susan Lewis”, parent: “Sean Lewis”, source:“images/HS16.png” },
{ key: “Jennifer Lewis(Mother)”,name:“Jennifer Lewis(Mother)”, parent: “Sean Lewis”,source:“images/HS11.png” },
{ key: “Monica Angeles(Grandmother)”, name:“Monica Angeles(Grandmother)”, parent: “Jennifer Lewis(Mother)”,source:“images/HS1.png” },
{ key: “Alison Ince(Aunt)”, name:“Alison Ince(Aunt)”,parent: “Jennifer Lewis(Mother)”,source:“images/HS4.png” },
{ key: “Danialla Perez(Teacher)”, name:“Danialla Perez(Teacher)”, parent: “Sean Lewis”,source:“images/HS16.png” },
{ key: “Serena Wright(Attorney)”, name:“Serena Wright(Attorney)”, parent: “Sean Lewis”,source:“images/HS14.png” },
{ key: “Mark Cerda(Therapist)”, name:“Mark Cerda(Therapist)”,parent: “Sean Lewis”,source:“images/HS2.png” },
{ key: “Sandra Hunt(CASA worker)”,name:“Sandra Hunt(CASA worker)”, parent: “Sean Lewis”,source:“images/HS9.png” },
]);

doubleTreeLayout(myDiagram);

The structure formed looks like below

DoubleTree.JPG841×694 40 KB

So my questions are as follows

  1. I need to give emphasize on the shape relationship wise:
    Near family members - Bigger size(nodes)
    Extended family - Smaller size
    Non related - More smaller
  2. I tried using angles in doubleTree.html sample for (60-120-180 etc) so that i can group the related, extended family and non related ones logically but could not find a solution.
  3. Can i create one to many links as mentioned in fig below
    for ex: Sean Lewis to Teacher, Sean Lewis to Attorney, Sean Lewis to Therapist & Sean Lewis to CASA Worker
2

Maybe you want to start from this sample instead: Physician Network

3

Thanks Walter. Where can i find the code for this sample?

4

As usual, it’s all in the same page.

5

Cool Thanks. Got it from the page source. :smile:

6

Hello Walter,
I observe that after each refresh the position of the nodes changes and the size of arrows too.

Qn1: Can we restrict that and make it static?

Qn2: Can we have one to many arrows as given in the below snap?

7

Well, one easy way to do that would be to implement the junction point as a tiny node. Presumably you know which subset of the children of a node should be gathered together like that, so you know how to insert such a dummy node into the graph.

8

Thanks Walter for an alternate solution regarding linking multiple nodes to a dummy node.
As i had mentioned in my prev question, can we make the layout static so that after every refresh the position of nodes do not change

Currently I am using physicianNetwork as you suggested. I want to tailor my requirement accordingly.

My requirement is :
Aligning the more related nodes to one side.
Aligning less related nodes to some other side and
Aligning totally non related nodes to some other side.
The layout should look something like below.

Using the physicianNetwork i am able to obtain the below layout

physicianLayout.png1055×692 57.8 KB

// create the model for the concept map
var nodeDataArray = [
{ key: 1, text: “Sean Lewis”, a: 150 },
{ key: 2, text: “Greg Lewis(Father)”,a: 150 },
{ key: 3, text: “Eve Wymann (Step Mother)”,a: 150},
{ key: 4, text: “Susan Lewis(Sister)” ,a: 150},
{ key: 5, text: “Jennifer Lewis(Mother)”, a: 140},
{ key: 6, text: “Monica Angeles(Grandmother)”, a: 40 },
{ key: 7, text: “Alison Ince(Aunt)”, a: 40, b: 10},
{ key: 8, text: “Danialla Perez(Teacher)”, a: 40 },
{ key: 9, text: “Serena Wright(Attorney)”, a: 40 },
{ key: 10, text: “Mark Cerda(Therapist)”, a: 40 },
{ key: 11, text: “Sandra Hunt(CASA worker)”, a: 40 }
];
var linkDataArray = [
{ from: 1, to: 2 },
{ from: 1, to: 5 },
{ from: 1, to: 4 },
{ from: 2, to: 3 },
{ from: 5, to: 6 },
{ from: 5, to: 7 },
{ from: 1, to: 8 },
{ from: 1, to: 9 },
{ from: 1, to: 10 },
{ from: 1, to: 11 }
];

Walter can you suggest what I should alter in my code so as to obtain the desired result?
Thanks,
Tushar

9

You have two choices for getting the same layout each time.

The general solution is to store the node locations in your data source. That might mean saving the node locations after the first layout, and then not executing the layout again.

But in your case it might be simpler to execute the layout each time, but to set ForceDirectedLayout.randomNumberGenerator to null.

10

Hi Walter,

Couldn’t find ForceDirectedLayout.randomNumberGenerator in the code where i can set it to null so as to prevent any change in the layout after every refresh.

[Here is the code] https://drive.google.com/file/d/0B3p45nnrxoEhTnlzUGNBYURJNTg/view?usp=sharing

Would you have a look?

11

Here is the property: ForceDirectedLayout | GoJS API.

In your code, just set randomNumberGenerator: null when initializing your layout.

12

Setting the randomNumberGenerator to null worked. But post that the names are displaying inside the circle. Like below

Instead outside as it used to come up earlier.

[Here is the code] https://drive.google.com/file/d/0B3p45nnrxoEhTnlzUGNBYURJNTg/view?usp=sharing

Any thoughts Walter…?

13

You replaced the SmartLabelForceDirectedLayout with a regular ForceDirectedLayout, thereby losing the additional functionality of the SmartLabelForceDirectedLayout.

14

Looks like I am in a catch 22 situation :confounded:

15

???

Just set randomNumberGenerator: null on the SmartLabelForceDirectedLayout.