Formatting options for family tree usage

Hi @koka-noodles,

Thanks for your interest in js_family_tree. I am not yet sure if I understand you right but let's try to figure it out together.

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

The easiest way would be to define all persons and their relationships in the data.js file. For an example, see this file.

My first thought would be to make a new version of the links with a separate colour

You can change the link color by assigning different classes to the edges (based on some criterion). The relevant line would be this: https://github.com/BenPortner/js_family_tree/blob/c2e2d6566660d3b65ee7dd4d53b10125e0e8b6c9/js/familytree.js#L894

For example, you could change the class based on whether the edge starts in a union or ends in a union like this:

        var linkEnter = link.enter().insert('path', "g")
            .attr("class", edge => {
                if(edge.source.is_union()) {
                    return "union_source_edge"
                } else {
                    return "union_target_edge"
                }
            })
            .attr('d', _ => {
                var o = {
                    x: source.x0,
                    y: source.y0
                }
                return this.link_path_func(o, o)
            });

Of course you would then also have to adapt the main.css file to define those classes. For example:

.union_source_edge {
    fill: none;
    stroke: red;
    stroke-width: 2px;
}

.union_target_edge {
    fill: none;
    stroke: blue;
    stroke-width: 2px;
}

Result:

I hope this helped a bit. Let me know if anything is unclear.

Cheers. Ben

BenPortner / js_family_tree

Formatting options for family tree usage #12