d3.js Family Tree Spouse Highlight

http://stackoverflow.com/questions/19225654/d3-js-family-tree-spouse-highlight/

by Max Leiserson

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div id="ft_svg_div"></div>
</body>

CSS

.node {
    cursor: pointer;
}
.link, .node rect {
    fill: none;
    stroke-width: 1.5px;
    stroke: #636363;
}
.link {
    stroke: #969696;
}
.node rect {
    fill: white;
}
.link path, .node rect, .node text {
    -moz-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
}
.node rect.normal {
    fill: #bdbdbd;
    stroke: none;
}
.node rect.selected {
    fill: none;
    stroke: #9B0000;
    stroke-width: 3;
}
.node .data rect {
    stroke: #3182bd;
}
.node .datum rect {
    fill: #d9d9d9;
    stroke: none;
}
.node .null rect {
    fill: none;
    stroke: none;
}
.node .null text {
    fill: #636363;
}
.node .code text {
    font-family: monospace;
}
.node .key rect {
    fill: #a1d99b;
    stroke: none;
}
.link .to-key {
    stroke: #a1d99b;
}
.link .to-null {
    stroke-dasharray: 0.5, 3.5;
    stroke-linecap: round;
}
.link .from-data {
    stroke: #3182bd;
}
code span {
    -moz-transition: background 250ms linear;
    -ms-transition: background 250ms linear;
    -o-transition: background 250ms linear;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear;
}

JavaScript

(function () {

    d3.familyTree = {
        rootGeneration: 0,
        roundedCorner: 6,
        svgCanvasMinimumWidth: 400,
        generationWidth: 300,
        normalNodeWidth: 240,
        normalNodeHeight: 45,
        gapBetweenParentChild: 350,
        gapBetweenSpouses: 70,
        margin: {
            top: 0,
            right: 20,
            bottom: 0,
            left: 20
        },
        treeData: {
            "personId": "1000001",
                "personFullName": "Father-0 (PMI)",
                "personGenderId": 1,
                "personLivingOrDiedId": 2,
                "personSelected": true,
                "personNickName": "(PMI Nickname)",
                "personSpouses": [{
                "personId": "1000002",
                    "personFullName": "Mother-0 (MP)",
                    "personGenderId": 0,
                    "personSelected": false
            }, {
                "personId": "1000052",
                    "personFullName": "Mother-01 (MP2)",
                    "personGenderId": 0,
                    "personSelected": false
            }

            ],
                "personChildren": [{
                "personId": "1000003",
                    "personFullName": "Father 1 (YMP)",
                    "personGenderId": 1,
                    "personSelected": false,
                    "personSpouses": [{
                    "personId": "1000004",
                        "personFullName": "Mother-1 (MY)",
                        "personGenderId": 0,
                        "personSelected": false
                }],
                    "personChildren": [{
                    "personId": "1000023",
                        "personFullName": "Father-2 (JMJ)",
                        "personGenderId": 1,
                        "personSelected": false,
                        "personNickName": "(JMJ Nickname)",
                        "personPictureFileName": "M1000002.jpg",
                       ...