d3:节点+链接，形成多代家谱;如何解析数据以绘制线条

我正在d3.js中制作一个三代或四代家谱。您可以在这里看到早期版本：

http://jsfiddle.net/Asparagirl/uenh4j92/8/

代码：

// People
var nodes = [
    { id: 1, name: "Aaron", x: 50, y: 100, gender: "male", dob: "1900", hasParent: false, hasSpouse: true, spouse1_id: 2 },
    { id: 2, name: "Brina" , x: 400, y: 100, gender: "female", dob: "1900", hasParent: false, hasSpouse: true, spouse1_id: 1 },
    { id: 3, name: "Caden", x: 100, y: 260, gender: "female", dob: "1925", hasParent: true, parent1_id: 1, parent2_id: 2, hasSpouse: false },
    { id: 4, name: "David", x: 200, y: 260, gender: "male", dob: "1930", hasParent: true, parent1_id: 1, parent2_id: 2, hasSpouse: false }, 
    { id: 5, name: "Ewa", x: 320, y: 260, gender: "female", dob: "1935", hasParent: true, parent1_id: 1, parent2_id: 2, hasSpouse: true, spouse_id: 6 },
    { id: 6, name: "Feivel", x: 450, y: 260, gender: "male", dob: "1935", hasParent: false, hasSpouse: true, spouse_id: 5 },
    { id: 7, name: "Gershon", x: 390, y: 370, gender: "male", dob: "1955", hasParent: true, parent1_id: 5, parent2_id: 6, hasSpouse: false }
];
var links = [
    { source: 0, target: 1 }
];
// Make the viewport automatically adjust to max X and Y values for nodes
var max_x = 0;
var max_y = 0;
for (var i=0; i<nodes.length; i++) {
    var temp_x, temp_y;
    var temp_x = nodes[i].x + 200;
    var temp_y = nodes[i].y + 40;
    if ( temp_x >= max_x ) { max_x = temp_x; }
    if ( temp_y >= max_y ) { max_y = temp_y; }
}
// Variables
var width = max_x,
    height = max_y,
    margin = {top: 10, right: 10, bottom: 10, left: 10},
    circleRadius = 20,
    circleStrokeWidth = 3;
// Basic setup
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id", "visualization")
    .attr("xmlns", "http://www.w3.org/2000/svg");
var elem = svg.selectAll("g")
    .data(nodes)
var elemEnter = elem.enter()
    .append("g")
    .attr("data-name", function(d){ return d.name })
    .attr("data-gender", function(d){ return d.gender })
    .attr("data-dob", function(d){ return d.dob })
// Draw one circle per node
var circle = elemEnter.append("circle")
    .attr("cx", function(d){ return d.x })
    .attr("cy", function(d){ return d.y })
    .attr("r", circleRadius)
    .attr("stroke-width", circleStrokeWidth)
    .attr("class", function(d) {
        var returnGender;
        if (d.gender === "female") { returnGender = "circle female"; } 
        else if (d.gender === "male") { returnGender = "circle male"; }
        else { returnGender = "circle"; }
        return returnGender;
    });
// Add text to the nodes
elemEnter.append("text")
    .attr("dx", function(d){ return (d.x + 28) })
    .attr("dy", function(d){ return d.y - 5 })
    .text(function(d){return d.name})
    .attr("class", "text");
// Add text to the nodes
elemEnter.append("text")
    .attr("dx", function(d){ return (d.x + 28) })
    .attr("dy", function(d){ return d.y + 16 })
    .text(function(d){return "b. " + d.dob})
    .attr("class", "text");

// Add links between nodes
var linksEls = svg.selectAll(".link")
    .data(links)
    .enter()
    // Draw the first line (between the primary couple, nodes 0 and 1)
    .append("line")
    .attr("x1",function(d){ return nodes[d.source].x + circleRadius + circleStrokeWidth; })
    .attr("y1",function(d){ return nodes[d.source].y; })
    .attr("x2",function(d){ return nodes[d.target].x - circleRadius - circleStrokeWidth; })
    .attr("y2",function(d){ return nodes[d.target].y; })
    .attr("class","line");
    // Draw subsequent lines (from each of the children to the couple line's midpoint)
    function drawLines(d){
        var x1 = nodes[d.source].x;
        var y1 = nodes[d.source].y;
        var x2 = nodes[d.target].x;
        var y2 = nodes[d.target].y;
        var childNodes = nodes.filter(function(d){ return ( (d.hasParent===true) && (d.id!=7) ) });
        childNodes.forEach(function(childNode){
             svg.append("line")
                 // This draws from the node *up* to the couple line's midpoint
                .attr("x1",function(d){ return childNode.x; })
                .attr("y1",function(d){ return childNode.y - circleRadius - circleStrokeWidth + 1; })
                .attr("x2",function(d){ return (x1+x2)/2; })
                .attr("y2",function(d){ return (y1+y2)/2; })
                .attr("class","line2");
        })
    }
    linksEls.each(drawLines);

所以，这对一代人来说还可以。问题是，到了下一代的时候（Ewa嫁给了Feivel，孩子是Gershom），我们必须想办法复制一种伴侣之间的直线结构，从父母的夫妻线中点向下延伸到孩子。一个相关的问题是，现在，第一对被识别为一对（不同的线型）只是因为它们是我的节点列表中的前两条数据，而不是通过读取数据（即hasSpouse、spouse1_id等）来真正识别

我们非常感谢您的想法和想法，使这项工作变得更好！