I have manipulated the code like below. Please let me know if there is a better way to do so.
{ key: 1, n: “Sean Lewis”, s: “M”, m:2, f:7},
{ key: 2, n: “Jennifer Lewis(Mother)”, s: “F”,ux: 7},
{ key: 3, n: “Alison Ince(Aunt)”, s: “F”,ux: 2}, //Manipulated ux
{ key: 4, n: “Monica Angeles(Grandmother)”, s: “F”,ux: 2},
{ key: 5, n: “Susan Lewis(Sister)”, s: “F”, ux: 1},
{ key: 6, n: “Eve Wymann (Step Mother)”, s: “F”,ux: 7},
{ key: 7, n: “Greg Lewis(Father)”, s: “M”},
{ key: 8, n: “Daniealla Perez(Teacher)”, s: “F”,ux: 1},
{ key: 9, n: “Serena Wright(Attorney)”, s: “F”,ux: 1},
{ key: 10, n: “Mark Cerda(Therapist)”, s: “M”,ux: 1},
Are you really asking about whether links can connect to another link, rather than to a node? If so, the answer is yes. Take a look at Links to Links.
Remember that you can easily change the appearance of the “label nodes” which are located on links rather than being independent nodes. In that sample they are small dots, but they can be anything from “nothing” to an arbitrarily complex node. Also in that sample, links that connect with a link are colored green instead of blue for the regular links, but that distinction was only made for expository purposes.
Thanks Walter for the quick reply.
Connecting link to link is not the main end objective. The main end objective is to use genogram to obtain the relationship (ref the attached snapshot)
Can you help me with this?
Which relationship are you talking about in your screenshot? The only one that looks even slightly unusual is the one between Teacher-Attorney-Therapist-Child, and that can be achieved in at least two different manners (one of which I just mentioned).
You already have the Genogram sample, Genogram. As it so happens it already uses the link-to-link functionality that GoJS offers to represent children as coming from a particular marriage rather than just from a mother or just from a father.
So I still do not understand what it is that you want that one cannot already do using GoJS.
Hey Walter,
It was difficult to fit the relationship that i had mentioned in the snapshot using genogram.
Hence as you suggested I tried below 2 approaches
- Links to Links and
- Double Tree
Links to Links
{ "class": "go.GraphLinksModel",
“linkLabelKeysProperty”: “labelKeys”,
“nodeDataArray”: [
{“key”:“Sean Lewis”, “color”:“yellow”, “loc”:“200 14”},
{“key”:“Jeniffer Lewis(Mother)”, “color”:“orange”, “loc”:“350 -80”},
{“key”:“Allison Ince (Aunt)”, “color”:“orange”, “loc”:“450 10”},
{“key”:“Monica Angeles(Grandmother)”, “color”:“orange”, “loc”:“400 -150”},
{“key”:“Greg Lewis(Father)”, “color”:“orange”, “loc”:“0 -80”},
{“key”:“Eve Waymann(Step mother)”, “color”:“orange”, “loc”:“50 -150”,“img”: “images/HS6.png”},
{“key”:“Danialla Perez(Teacher)”, “color”:“grey”, “loc”:"-50 14"},
{“key”:“Serena Wright(Attorney)”, “color”:“grey”, “loc”:"-60 50"},
{“key”:“Mark Cerda(Therapist)”, “color”:“grey”, “loc”:“10 80”},
{“key”:“Sandra Hunt(CASA worker)”, “color”:“grey”, “loc”:“70 120”},
{“key”:“Susan Lewis(Sister)”, “color”:“orange”, “loc”:“200 -50”},
{“key”:“A-B”, “category”:“LinkLabel” },
{“key”:“B-C”, “category”:“LinkLabel” },
{“key”:“B-D”, “category”:“LinkLabel” },
{“key”:“A-E”, “category”:“LinkLabel” },
{“key”:“E-F”, “category”:“LinkLabel” },
{“key”:“A-G”, “category”:“LinkLabel” },
{“key”:“A-H”, “category”:“LinkLabel” },
{“key”:“A-I”, “category”:“LinkLabel” },
{“key”:“A-J”, “category”:“LinkLabel” },
{“key”:“A-K”, “category”:“LinkLabel” }
],
“linkDataArray”: [
{“from”:“Sean Lewis”, “to”:“Jeniffer Lewis(Mother)”, “labelKeys”:[ “A-B” ]},
{“from”:“Jeniffer Lewis(Mother)”, “to”:“Monica Angeles(Grandmother)”, “labelKeys”:[ “B-C” ]},
{“from”:“Jeniffer Lewis(Mother)”, “to”:“Allison Ince (Aunt)”, “labelKeys”:[ “B-D” ]},
{“from”:“Sean Lewis”, “to”:“Greg Lewis(Father)”, “labelKeys”:[ “A-E” ]},
{“from”:“Greg Lewis(Father)”, “to”:“Eve Waymann(Step mother)”, “labelKeys”:[ “E-F” ]},
{“from”:“Sean Lewis”, “to”:“Danialla Perez(Teacher)”, “labelKeys”:[ “A-G” ]},
{“from”:“Sean Lewis”, “to”:“Serena Wright(Attorney)”, “labelKeys”:[ “A-H” ]},
{“from”:“Sean Lewis”, “to”:“Mark Cerda(Therapist)”, “labelKeys”:[ “A-I” ]},
{“from”:“Sean Lewis”, “to”:“Sandra Hunt(CASA worker)”, “labelKeys”:[ “A-J” ]},
{“from”:“Sean Lewis”, “to”:“Susan Lewis(Sister)”, “labelKeys”:[ “A-K” ]}
]}
Issue with LinkstoLinks
Issue#1: I had to manually add the location coordinates. Can the figure automatically format itself or we need to provide the loc coordinates every time?
Issue#2: Can we add images and caption to the nodes?
- Double Tree approach
// 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”,color: lavgrad },
{ key: “Greg Lewis(Father)”, parent: “Sean Lewis”, color: bluegrad },
{ key: “Eve Wymann (Step Mother)”, parent: “Greg Lewis(Father)” },
{ key: “Susan Lewis”, parent: “Sean Lewis” },
{ key: “Jennifer Lewis(Mother)”, parent: “Sean Lewis”, color: yellowgrad },
{ key: “Monica Angeles(Grandmother)”, parent: “Jennifer Lewis(Mother)”, color: yellowgrad },
{ key: “Alison Ince(Aunt)”, parent: “Jennifer Lewis(Mother)” },
{ key: “Danialla Perez(Teacher)”, parent: “Sean Lewis” },
{ key: “Serena Wright(Attorney)”, parent: “Sean Lewis” },
{ key: “Mark Cerda(Therapist)”, parent: “Sean Lewis” },
{ key: “Sandra Hunt(CASA worker)”, parent: “Sean Lewis” },
]);
Issue#1: Can we add images & caption to the nodes?
For the first issue, you want to specify a Diagram.layout. GoJS Layouts -- Northwoods Software I suggest that you use a ForceDirectedLayout.
For both issues, you can add whatever you want to each node by putting those objects into the node template. Please read Get Started with GoJS and the first pages of GoJS Introduction -- Northwoods Software.
Or just look at the samples at GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software and copy and adapt the node template(s) that you like.