Customizable links/paths between nodes

[aroraank]

How i can show conditional custom paths styles for different spouses like example: green path for current spouse & red path for ex-spouse?

[ucay]

You can add your custom styles.

/* Data object */
[{
    /* ... */
    marriages: [{
        /* ... */
        class: "node spouse",
        /* ... */
    },{
        /* ... */
        class: "node spouse spouse_current",
        /* ... */
    }]
}]

/* stylesheets */ 
.spouse{
    background-color: red;
}
.spouse_current{
    background-color: green;
}

[aroraank]

Hi @ucay , thanks for the solution
It is changing the color of node only. Is there any way to change the paths color also, for spouse and ex-spouse?

[ucay]

Sorry @aroraank , missing the "path" word 😄
I like your idea for custom path's color.
For example, different color for current and ex-spouse, 1st and 2nd generation, or each descendant.

https://github.com/ErikGartner/dTree/blob/master/src/builder.js#L93
Can we add a class attribute to spouse ?
Or can we add it as a callback?

WDYT, @ErikGartner ?

[ErikGartner]

Good question @aroraank and thanks for helping out @ucay! 🙂 Currently there is no way to do this. Though I would be open to merging a pull-request adding this feature as it is a good suggestion.

A simpler class based solution makes if we can come up with a good and consistent way of addressing the path and everything that we want to do in terms of customize can be done in CSS (which I think is the case). We could add a class linkClass to spouses and children (of marriages and directly to a node).

A callback based solution would make sense if we would want more powerful customization beyond what CSS allows for. The only problem is designing the callback with "enough" information to be able to determine the color of the path. It would need something like function linkRendeder(fromNode, toNode, isChild, isSibling) and then execute the relevant d3 SVG commands. However this would force the user to write d3 code themselves, though on the other hand if the user wants to change the lines they probably are be an advanced user.

In general I'm open for merging any/both of these solutions as long as the solution is backwards compatible with the current format (i.e. adding an optional field or callback is fine).

I think the class based solution probably is favorable and considerably simpler (here and here dTree currently sets the path class). Some code to propagate the class attribute in a similar manner as with textClass and nodeClass and then setting it for each link should be all that is required.

/Erik

[meganathan-codenatives]

// Draw siblings (marriage)
this.g.selectAll('.sibling').data(this.siblings).enter().append('path').attr('class', opts.styles.marriage).attr('d', _.bind(this._siblingLine, this)).attr('style', _.bind(this._siblingStroke, this));

{
key: '_siblingStroke',
value: function _siblingStroke(d, i) {
var marriageStyle = "fill: none;stroke: #23883D;stroke-width: 5;";
// Not first marriage
if (d.number > 0) {
marriageStyle = "fill: none;stroke: #90EE90;stroke-width: 5;stroke-dasharray:4 3"
}
return marriageStyle;
}
}