I need this genogram sample code for adding new node and display twins :
Can you share if available?
Or can you give information about how to add family addition and display twins in this genogram sample?
And how are children in a family ordered from left to right? Is it possible to specify this ordering with a specific key value for each object in the data?
Basically all of our samples have all of their source code in the HTML page itself. Just invoke your browser’s View Page Source command.
That GenogramLayout uses LayeredDigraphLayout, which is specifically designed to re-order nodes so as to reduce link crossings. However you can disable that reordering by overriding LayeredDigraphLayout.reduceCrossings to be a no-op:
// prevent the layout from reducing link crossings by changing the order of the nodes in the layers
reduceCrossings() {}
But then you need to make sure that the children are added to the graph in the order that you want.
Yes, I was able to access the html file, thank you.
Unrelated to the topic, but can I add a text to the left or right side for each line?
For example, in a family tree, there are 3 rows of a person’s child, himself and his parents. I want to add text at the beginning or end of each line as in the example image.
When a new parent or child is added to the tree, these texts should be updated when a new line is passed. Is this possible?
Sure, that and related decorations can be implemented using “bands”.
A sample using TreeLayout: Layer Bands using a Background Part
A sample using LayeredDigraphLayout: BandedLDLayout
You would need to specify a Panel.itemTemplate in the special template, instantiated one per band, that had the information and appearance that you wanted.
Thank you Walter!
@walter I made edits on the non-twins genogram sample. now I want to add the twins feature into that project, but the two sample files are very different from each other. What do I need to change and what do I need to add while adding the twins feature to the non-twins sample file?
There’s a new ParentChildLink class that extends Link, and there’s a new “Identical” link template.
There’s a new setupIdenticalTwins function.
I couldn’t figure out how to combine the two diagrams. What I want to do is create a layer for the lowest node and its sibling nodes. Next, create a new layer with its parents. In this way, going up to the top nodes.
When you add a new node, that node must be in the correct layer. For example, when a child node is added to a node in the upper layer, the new node must be in a lower layer.
When you add parent nodes for a node in the top layer, a new layer should be created and contain the new nodes.
However, different data should be used for genogram and layer. I couldn’t find how to combine them with each other. Can you help me with an example on this?
Yes, but it will take a while…
Sure, thanks in advance
Hi @CrevZZ ,
Have you create spouses marriage multiple? That like sample: one husband has than one wife?
Hi @nguyenviet2509,
I tried it by changing the data in nodeData in the sample file. For example
[
{key:0, n:"Husband", s:"M", ux:[1,2]},
{key:1, n:"Wife", s:"F", vir:0},
{key:2, n:"Wife2", s:"F", vir:0}
]
When I defined this value as array, multiple spouses marriage was supported.
Thanks to the setupMarriages function in the sample file.
function setupMarriages(diagram) {
var model = diagram.model;
var nodeDataArray = model.nodeDataArray;
for (var i = 0; i < nodeDataArray.length; i++) {
var data = nodeDataArray[i];
var key = data.key;
var uxs = data.ux;
if (uxs !== undefined) {
if (typeof uxs === "number") uxs = [ uxs ];
for (var j = 0; j < uxs.length; j++) {
var wife = uxs[j];
if (key === wife) {
// or warn no reflexive marriages
continue;
}
var link = findMarriage(diagram, key, wife);
if (link === null) {
// add a label node for the marriage link
var mlab = { s: "LinkLabel" };
model.addNodeData(mlab);
// add the marriage link itself, also referring to the label node
var mdata = { from: key, to: wife, labelKeys: [mlab.key], category: "Marriage" };
model.addLinkData(mdata);
}
}
}
var virs = data.vir;
if (virs !== undefined) {
if (typeof virs === "number") virs = [ virs ];
for (var j = 0; j < virs.length; j++) {
var husband = virs[j];
if (key === husband) {
// or warn no reflexive marriages
continue;
}
var link = findMarriage(diagram, key, husband);
if (link === null) {
// add a label node for the marriage link
var mlab = { s: "LinkLabel" };
model.addNodeData(mlab);
// add the marriage link itself, also referring to the label node
var mdata = { from: key, to: husband, labelKeys: [mlab.key], category: "Marriage" };
model.addLinkData(mdata);
}
}
}
}
}
You can take a look here https://codepen.io/pthorson/pen/wzZpQJ
@CrevZZ tks for response,
But I feel not easy to see, and this way not ok for case one husband has from than 3 wife.
Do you know another way?
OK, here’s a variation on the Genogram sample of v2.3:
As always, the complete source code is inline in the page itself.
Walter thank you very much.
I have one more question on this subject. Let’s say there is a focused node on the diagram. Can we make focus for the next node on the same layer when a key is pressed on the keyboard?
Sure. I assume you know how to implement a keyboard event handler: GoJS Commands -- Northwoods Software
In the Genogram sample there’s no state declaring who has “focus”. It’s just whether or not a node is selected. Hmmm, the sample doesn’t even set Diagram.maxSelectionCount to 1, so all of the nodes could be “focused”.
So if you don’t want to add any state about the node that is focused (if any), you could see if a node is selected and then find the next available node (if any) to select. Or the previous one.
As it so happens, the DrawCommandHandler extension supports this kind of behavior in a more general manner. It has a DrawCommandHandler.arrowKeyBehavior property that controls what happens when the user types an arrow key. I just tried it, but it got stuck dealing with marriage link label nodes. So you’ll need to adapt the code from there (extensions/DrawCommandHandler.js or extensionsJSM/DrawCommandHandler.ts).
I have just checked in an enhancement (bug fix?) to DrawCommandHandler so that when selecting the next Node using an arrow key, it never selects a Node for which Part.canSelect returns false. I’m not sure when the next release will be. Certainly not this week. Maybe next week
Then you can import the DrawCommandHandler.js file and add this initialization of the Diagram:
commandHandler: $(DrawCommandHandler, { arrowKeyBehavior: "select" }),
And I think you get the behavior that you wanted. Assuming you wanted the arrow key to be used.
Yes, as you said. Thanks again Walter.