CODEWITHSUNDEEP
javascriptreactjsd3.jsfamily-tree
Vaishak
Vaishak

Reputation: 473

Family Tree with multiple parents using D3, VX & React

Currently, I'm trying to have a family tree which will have

  1. Spouses/Partners (Multiple)
  2. Children of Spouses/Partners

I want to get this done in React.js, and I am using VX for it.

As per D3 tree structure, we could have only one parent for a child, so in order to generate a tree as per my choice, I had to align partners as children of a member. And with additional JSON key, I style the partners. See the example below.

Family Tree with Partners as Children

The same is available in my repo

I am impressed the way how Cyril Cherian tried to implement the tree with partners in this JSFiddle

`https://jsfiddle.net/cyril123/fcd5q8fv/1/`

and I made a fork of it (Javascript)

`https://jsfiddle.net/Vaishak/x6bg9dcu/`

and made some changes.

Family Tree wiht Partners

But the problem with this is that it cannot have multiple spouses/partners in a clean/straighforward way, will have to modify the JSON very badly.

Same JSFiddle script is also avalable in my repo

I would like to have the mix of both, where

  1. Partners will be aligned with member of the tree
  2. Partner will not have the line from any other node (unless mentioned)
  3. Children will be originating from the mid of Partners line

Any solution here? :)

Note: I've posted the same on VX's github issue page, not sure whether this will be addressed there.

Upvotes: 3

Views: 4811

Answers (1)

Vaishak
Vaishak

Reputation: 473

For making it easier for people who look for answer for this question.

I could tackle it down and got solution as seen here

Please feel free to look at the data structure and the way I drew spouse line.

Upvotes: 1

Related Questions