how can i change tree from a horizontal view to a vertical one ?

IS there a way for changing the basic data variables dynamically (persons, links, unions) and the DAG automatically adjusts itself to new info. - for example if I add a person with the correct links in the appropriate [data.persons, data.unions, data.links]
new information should be auto updated in the dag. If not auto updated at least a refresh function to take care of new data.

Thanks for any help.

HI
YOU ARE AMAZING
It is the most beautiful tree I found.

In fact, I am new to d3 world and if you can help me how to insert child node or delete or update I will appreciate you

Anyway THANKS

The tooltip_div is faded in by a mouseover event and faded out by mouseout on a node or its text. I've noticed that while the div is hidden by setting opacity:0 it still blocks mouse events from happening on nodes it previously covered. Only by setting visibility:hidden the div will stop blocking mouse events on underlying nodes.
I've made too much specific changes in my fork to be able to create a pull request (Also I'm not too much of a git expert). But here are the changes I made to circumvent this: unverbuggt@ea56f2e

Hey, love the project but I'm pretty basic with JS. The issue is that I'm trying to use the code to set up a big family tree but I can't specify who is married / divorced to whom. Could you suggest a place to start ? My first thought would be to make a new version of the links with a separate colour but I think integrating it would be a bit messy.

Thanks for the work anyway

The use of d3-dag, unions and collapsible node works really nicely.

I'm new to d3 / d3-dag, so am wondering how to ensure the following:

• the newly inserted partner of would display immediately underneath their partner, i.e. the partner of the eldest child should display directly underneath them and above the second-eldest child when clicking on the eldest child triggers the uncollapse
• sort order stays the same across generations of a family, i.e. the eldest children of the eldest child always displaying at the top in the 'grandchildren' layer of the hierarchy. At the moment, at each uncollapse, the newly inserted children always just display at the bottom, e.g. if I uncollapse the eldest child their children display, then uncollapse the second-eldest child their children show below the eldest child's children, then collapsing the eldest child leaves just the second-eldest child's children, but uncollapsing the eldest child now displays their children below the second-eldest child's children

NB: first thing I did was change y_sep to -50 instead of 50, to get the children sorting eldest-to-youngest (reading top to bottom) instead of the other way around.

First, thank you for this interesting project!

While testing the example code, I found that I can consistently produce a couple visual glitches while clicking on the same node twice within transition_duration. The most common issue - nodes and their labels disappearing when clicking a node as its children are being hidden - can be seen below, produced on both your githack link and my own fork of the repository:

I have implemented a couple of exploratory workarounds for this in my own fork at bniedzie@6331114 - speeding up the transitions and preventing click() from firing often enough to cause the problem seems to avoid the above issue. Neither seems particularly elegant, but it has resolved the problem for me.

I have also found that repeatedly clicking the same node causes the view to gradually zoom in, despite the above change.

Thanks in advance for any thoughts you might have on this!

Tried importing familyTree.js in a react project and it throws below error:

Error in /~/familyTree.js (129:25)
Class extends value undefined is not a constructor or null

It seems there is a circular reference and not allowing to run the FamilyTree class instances.

Sample code:

`import * as React from 'react';
import './style.css';
import {FamilyTree} from './familyTree.js';
import { data } from './data.js';
import * as d3 from 'd3';

const svg = d3
.select("body")
.append("svg")

let FT = new FamilyTree(data, svg);

export default function App() {
svg
.attr("width", document.body.offsetWidth)
.attr("height", document.documentElement.clientHeight);

// make family tree object

// draw family tree
FT.draw();

return (

Can someone help?

Hi @BenPortner,
I really like your work and I am trying to implement it!

I am using this data set:

data = {
    "persons": {
        "id2": {
            "id": "id2",
            "own_unions": ["u2"],
            "parent_union": "u1",
            "name": "item01",
            "birthyear": 1900,
            "deathyear": 1980,
        },
        "id1": {
            "id": "id1",
            "own_unions": ["u1"],
            "name": "item00",
            "birthyear": 1901,
            "deathyear": 1985,
        },
        "id4": {
            "id": "id4",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item02",
            "birthyear": 1926,
            "deathyear": 2009,
        },
        "id3": {
            "id": "id3",
            "own_unions": ["u3"],
            "parent_union": "u2",
            "name": "topic00",
            "birthyear": 1902,
            "deathyear": 1970,
        },
        "id6": {
            "id": "id6",
            "own_unions": [],
            "parent_union": "u4",
            "name": "item04",
            "birthyear": 1931,
            "deathyear": 2015,
        },
        "id5": {
            "id": "id5",
            "own_unions": ["u4"],
            "parent_union": "u3",
            "name": "item03",
            "birthyear": 1930,
            "deathyear": 2010,
        },
    },
    "unions": {
        "u1": {
            "id": "u1",
            "partner": ["id1"],
            "children": ["id2"]
        },
        "u2": {
            "id": "u2",
            "partner": ["id2"],
            "children": ["id3"]
        },
        "u3": {
            "id": "u3",
            "partner": ["id3"],
            "children": ["id4", "id5"]
        },
        "u4": {
            "id": "u4",
            "partner": ["id4", "id5"],
            "children": ["id6"]
        },
    },
    "links": [
        ["id1", "u1"],
        ["u1", "id2"],
        ["id2", "u2"],
        ["u2", "id3"],
        ["id3", "u3"],
        ["u3", "id4"],
        ["u3", "id5"],
        ["id4", "u4"],
        ["id5", "u4"],
        ["u4", "id6"],
    ]
};

But i encounter the error:

Uncaught TypeError: Cannot set property 'points' of undefined
    at d3-dag.min.js:2
    at Array.map (<anonymous>)
    at d3-dag.min.js:2
    at B.each (d3-dag.min.js:2)
    at d3-dag.min.js:2
    at l (d3-dag.min.js:2)
    at update (..)
    at SVGGElement.click (..)
    at SVGGElement.<anonymous> (d3.min.js:2)

Why does this error happen?

Thanks in advance.

Ben,
Thanks for the work on this family tree it's much appreciated. I've been building my own family tree using your software. It goes back 7 generations. However, I have stumbled on a bug with the code that specifically relates to inter family marriages. I have a situation where two first cousins have married and so have a union between them. When I initially expand the nodes it displays correctly. When I collapse the node and attempt to re-expand the link. The screen just freezes for about 10 seconds. When I then attempt to expand any other nodes i get the same behaviour. I've included chrome development mode screenshots that highlight the issue and offending code.
Thanks again,
Anthony