Formatting options for family tree usage

[koka-noodles]

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

[BenPortner]

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:

js_family_tree/js/familytree.js

Line 894 in c2e2d65

.attr("class", this.link_css_class)

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