Multiple partners in a family tree in d3.js?

Question

I have a family tree from Cyril's amazing answer but I'm trying to figure out how to adjust it to support multiple partners. In this case, I added a "Mistress" node and am trying to denote that "Mistress" and "John" had a child named "Hidden Son".

The current data structure works like this:

In that, the root object stores everything. It has a children array which contains the up most "generation" with no parents. It also contains an object that contains the children of these sibling objects/nodes. In the example above, this is root.children[2].

I'm thinking I would have to refactor the data structure's children and inject information about whos parents the child is from. Just having trouble conceptualizing this, as well as the line

The end would would be something like this, except mistress would be on the left side:

Hi @meder just wanted to let you know that i didn't receive the bounty you had set on this question...seems like its gone to the community :( — Cyril Cherian, Dec 17 '15 at 05:32
Yeah i am asking the same question to SO support http://meta.stackoverflow.com/questions/312522/i-didnt-get-the-bounty-for-a-question-i-answered/312544?noredirect=1#comment283829_312544 he says _Your answer is therefore ineligible for automatic awarding of the bounty and can only win the bounty if bounty owner take the explicit action of awarding it to you._ — Cyril Cherian, Dec 17 '15 at 06:27
[Related meta discussion](http://meta.stackoverflow.com/q/312522/419956). — Jeroen, Dec 17 '15 at 06:28
I think you need to unaccept and then accept the answer...I believe thats how it works — Cyril Cherian, Dec 17 '15 at 06:43
@meder http://meta.stackoverflow.com/questions/312522/i-didnt-get-the-bounty-for-a-question-i-answered?cb=1 — ketan, Dec 17 '15 at 11:20
By the way, the way you award a bounty (you have to wait at least two days) is to click the box under the checkmark on the answer you've selected. Autoawarding only works if the answer was posted _during_ the bounty. Otherwise you must manually award by clicking the box under the checkmark. (Let me know when you've read this and I will be happy to clean up this comment.) — Kendra, Dec 17 '15 at 15:33

score 25 · Accepted Answer · answered Dec 04 '15 at 00:35

25

@medder thanks for the appreciation!

To do that I have added a hidden node between john and mistress.

And added a child to that hidden node, so it appears as if john and mistress have a child "Hidden Son" So the JSON looks like

{
    name: "Mistress",
    id: 9000,
    no_parent: true
  }, {
    name: "",//this is the new node between Mistress and John
    id: 100,
    no_parent: true,//it has no parents
    hidden: true,
    children: [{
      // so this hidden node will have a child 
      // which will make it appear as if john and mistress has a child.
      name: "Hidden Son",
      id: 9001
    }]
  }, {
    name: "John",
    id: 16,
    no_parent: true
  },

Working code here

Hope this helps!

answered Dec 04 '15 at 00:35

Cyril Cherian

30,992
7
41
50

I see. So it's necessary to have this hidden "child" object in between the parent objects in the list? I'm still trying to grasp your code. – meder omuraliev Dec 04 '15 at 00:47
By the way, how would you center the text if they overflow the box? – meder omuraliev Dec 04 '15 at 00:48
Yep! need to put in a hidden node in between just to give the visualization impression that the children belongs to john and mistress – Cyril Cherian Dec 04 '15 at 00:48
1

Line no 19 -21 in http://jsfiddle.net/cyril123/fcd5q8fv/1/ decides the x position for text... i have written some biz logic to center it. you are free to change it as per requirement http://jsfiddle.net/cyril123/fcd5q8fv/1/ – Cyril Cherian Dec 04 '15 at 00:53
1

amazing. appreciate it. – meder omuraliev Dec 04 '15 at 00:54
http://jsfiddle.net/fcd5q8fv/7/ I'm trying to make a more scaled version of this. Would you know how to make the line from grandparents of John more center to him? or Ex Wife 3 right on top of Hidden Son 3? Or if you have any hints/ideas in general about how to scale this that I can try, or recommend another technology that'd be great. – meder omuraliev Dec 04 '15 at 23:37
Also if "Grandma" doesnt exist but there's just Grandpa, still be centered? – meder omuraliev Dec 04 '15 at 23:44
I can see that all the children are connected to grandma...you didn't create a hidden node between them..well the layout is given by tree layout so i am doing tricks like adding empty node to center it.. – Cyril Cherian Dec 05 '15 at 00:50
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97033/discussion-between-meder-and-cyril). – meder omuraliev Dec 05 '15 at 02:22
Does this support for adding parent dynamically? – Zaheer Khorajiya Apr 27 '17 at 10:51
@ZaheerKhorajiya in that case you need to clear + redraw the tree again... – Cyril Cherian Apr 27 '17 at 12:25
Can you pls show me that how to add parents dynamically? – Zaheer Khorajiya Apr 27 '17 at 12:57

Multiple partners in a family tree in d3.js?

1 Answers1

Linked