3

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.

Vaishak
  • 462
  • 2
  • 6
  • 17
  • I couldn't generate the children from mid of partner line, however done something to achieve 80% of how I wanted. [See the PR](https://github.com/vkallore/d3-vx-family-tree/pull/1) – Vaishak Jan 26 '19 at 20:35
  • any progress with the question yet? Maybe there is some new library available to achieve the same result? – Masha Mar 31 '20 at 09:49
  • I've some solution [here](https://github.com/vkallore/d3-vx-family-tree) You can find it running [here](https://vk-ft.now.sh) – Vaishak Mar 31 '20 at 16:28

1 Answers1

1

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.

Vaishak
  • 462
  • 2
  • 6
  • 17