I've been struggling to figure out a free way to display large family trees. I've attempted with ObservableHQ, DagreD3, Cytoscape, and ElkJS. I've learned about D3 Clustering, various tree maps, and countless examples that somewhat do the job. I have several requirements that I've outlined below, and hope that with some help, I will be able to provide this layout to several organizations to allow them to populate with their own data.
- A node can have any (0/1/2+) number of parents and children
- A node should be placed within a container or group based on a value (think of it as generation, so similar aged nodes would be on the same level)
- Not-connected nodes (those with no parents or children) should still appear within the container (maybe to the right after the rest of the tree structure)
- Node should be able to display multiple data fields, a picture, and allow for hovering/clicking to show more details
- If a node has parents or children, clicking on the node will highlight (maybe grey out everything else until the background is selected) their parents and children all the way to the furthest leaves and all the way back to the roots, regardless of generation.
- Ease of use - allow for zoom, pan, and auto-fit?
The closest example I found is: https://rawcdn.githack.com/BenPortner/js_family_tree/31118b43b0933e8ff1f3210e32ae9e9d347da365/familytree.html
I need to be able to show all nodes from the start, not having to click through them all to see it all. I also want the tree to be top-down. No nodes really need to disappear as the entire tree can be moved around to focus on certain sections.
P.S. I made a mockup of what the node is supposed to look like. I also attached our most updated family tree to provide an example of the structure I'm working with: Example Node & Family Tree
