feat: Add support for multiple marriages #25

README.md

@@ -30,7 +30,7 @@ The data object should have the following structure:
   class: "overriding-css-class",
   textClass: "overriding-css-class",
   depthOffset: 1,
-  marriage: {
+  marriages: [{
     spouse: {
       name: "Mother",
       class: "overriding-css-class"
@@ -39,7 +39,7 @@ The data object should have the following structure:
       name: "Child",
       class: "child-class"
     }]
-  },
+  }],
   extra: {}
 }]
 ```

src/builder.js

@@ -47,7 +47,7 @@ class TreeBuilder {
 
     // Compute the layout.
     this.tree = d3.layout.tree()
-      .nodeSize([nodeSize[0] * 2, nodeSize[1] * 2]);
+      .nodeSize([nodeSize[0] * 2, nodeSize[1] * 2.5]);
 
     this.tree.separation(function separation(a, b) {
       if (a.hidden || b.hidden) {
@@ -69,15 +69,6 @@ class TreeBuilder {
 
     var nodes = this.tree.nodes(source);
 
-    // Since root node is hidden, read adjust height.
-    var rootOffset = 0;
-    if (nodes.length > 1) {
-      rootOffset = nodes[1].y;
-    }
-    _.forEach(nodes, function(n) {
-      n.y = n.y - rootOffset / 2;
-    });
-
     var links = this.tree.links(nodes);
 
     // Create the link lines.
@@ -100,7 +91,7 @@ class TreeBuilder {
       .enter()
       .append('path')
       .attr('class', opts.styles.marriage)
-      .attr('d', this._siblingLine);
+      .attr('d', _.bind(this._siblingLine, this));
 
     // Create the node rectangles.
     nodes.append('foreignObject')
@@ -210,13 +201,29 @@ class TreeBuilder {
   _siblingLine(d, i) {
 
     var ny = d.target.y + (d.source.y - d.target.y) * 0.50;
+    var nodeWidth = this.nodeSize[0];
+    var nodeHeight = this.nodeSize[1];
+
+    // Not first marriage
+    if (d.number > 0) {
+      ny -= nodeHeight * 8 / 10;
+    }
 
     var linedata = [{
       x: d.source.x,
       y: d.source.y
     }, {
-      x: d.target.x,
+      x: d.source.x + nodeWidth * 6 / 10,
+      y: d.source.y
+    }, {
+      x: d.source.x + nodeWidth * 6 / 10,
+      y: ny
+    }, {
+      x: d.target.x - nodeWidth * 6 / 10,
       y: ny
+    }, {
+      x: d.target.x - nodeWidth * 6 / 10,
+      y: d.target.y
     }, {
       x: d.target.x,
       y: d.target.y
@@ -229,7 +236,7 @@ class TreeBuilder {
       .y(function(d) {
         return d.y;
       })
-      .interpolate('step-after');
+      .interpolate('linear');
     return fun(linedata);
   }
 

src/dtree.js

@@ -97,19 +97,30 @@ const dTree = {
         reconstructTree(child, node);
       });
 
-      // go through marriage
+      parent.children.push(node);
+
+      // DEPRECATED: Backwards-compatability for v1.x syntax, remove for 2.0
       if (person.marriage) {
+        console.log('DEPRECATED: The data attribute "marriage" is deprecated in favor of "marriages" that takes an array. It will be removed in 2.0.');
+        person.marriages = [person.marriage];
+      }
+
+      //sort marriages
+      dTree._sortMarriages(person.marriages, opts);
+
+      // go through marriage
+      _.forEach(person.marriages, function(marriage, index) {
 
         var m = {
           name: '',
           id: id++,
           hidden: true,
           noParent: true,
           children: [],
-          extra: person.marriage.extra
+          extra: marriage.extra
         };
 
-        var sp = person.marriage.spouse;
+        var sp = marriage.spouse;
 
         var spouse = {
           name: sp.name,
@@ -122,11 +133,10 @@ const dTree = {
           extra: sp.extra
         };
 
-        var marriedCouple = dTree._sortPersons([node, spouse], opts);
-        parent.children.push(marriedCouple[0], m, marriedCouple[1]);
+        parent.children.push(m, spouse);
 
-        dTree._sortPersons(person.marriage.children, opts);
-        _.forEach(person.marriage.children, function(child) {
+        dTree._sortPersons(marriage.children, opts);
+        _.forEach(marriage.children, function(child) {
           reconstructTree(child, m);
         });
 
@@ -136,12 +146,10 @@ const dTree = {
           },
           target: {
             id: spouse.id
-          }
+          },
+          number: index
         });
-
-      } else {
-        parent.children.push(node);
-      }
+      });
 
     };
 
@@ -163,6 +171,17 @@ const dTree = {
       });
     }
     return persons;
+  },
+
+  _sortMarriages: function(marriages, opts) {
+    if (marriages != undefined && Array.isArray(marriages)) {
+      marriages.sort(function(marriageA, marriageB) {
+        var a = marriageA.spouse;
+        var b = marriageB.spouse;
+        return opts.callbacks.nodeSorter(a.name, a.extra, b.name, b.extra);
+      });
+    }
+    return marriages;
   }
 
 };

test/demo/data.json

@@ -2,28 +2,28 @@
   "name": "Niclas Superlongsurname",
   "class": "man",
   "textClass": "emphasis",
-  "marriage": {
+  "marriages": [{
     "spouse": {
       "name": "Iliana",
       "class": "woman"
     },
     "children": [{
       "name": "James",
       "class": "man",
-      "marriage": {
+      "marriages": [{
         "spouse": {
           "name": "Alexandra",
           "class": "woman"
         },
         "children": [{
           "name": "Eric",
           "class": "man",
-          "marriage": {
+          "marriages": [{
             "spouse": {
               "name": "Eva",
               "class": "woman"
             }
-          }
+          }]
         }, {
           "name": "Jane",
           "class": "woman"
@@ -40,7 +40,7 @@
           "name": "Jessica",
           "class": "woman"
         }]
-      }
+      }]
     }]
-  }
+  }]
 }]