d3. js как получить локтевые ссылки между узлами кластерного дерева

Question

Я очень плохо знаком с d3. js (и SVG), и я хочу создать дерево кластеров с коленчатыми соединителями.

Я получил ссылку от https://codepen.io/VividD/pen/fIFJt. На данный момент я получаю как ниже (слева). Я буду передавать данные динамически отображать дерево и нужно, чтобы коленчатые связи между узлами были даже такими, как показано ниже (справа).

Я пытался изменить значения в функции подключения, но не получил правильное значение.

Я надеюсь, что кто-то может помочь мне с этим

var margin = {top: 100, right: 50, bottom: 100, left: 50},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var tree = d3.layout.cluster()
    .separation(function(a, b) { return a.parent === b.parent ? 1 : 1.2; })
    .children(function(d) { return d.parents; })
    .size([width, height]);

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
   .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var nodes = tree.nodes(getData());
  
var node = svg.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g");
    
node.append("rect")
    .attr("width", 140)
    .attr("height", 60)
    .attr("fill", "tan")
    .attr("x", function(d) { return d.x - 70; })
    .attr("y", function(d) { return height - d.y - 40; });

node.append("text")
    .attr("font-size", "16px")
    .attr("fill", "black")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return height - d.y - 15; })
    .style("text-anchor", "middle")
    .text(function(d) { return d.name; });

      
var link = svg.selectAll(".link")
    .data(tree.links(nodes))
   .enter()
    .insert("path", "g")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke", "#000")
    .attr("shape-rendering", "crispEdges")
    .attr("d", connect);
  
function connect(d, i) {
    return     "M" + d.source.x + "," + (height - d.source.y)
             + "V" + (height - (3*d.source.y + 4*d.target.y)/7)
             + "H" + d.target.x
             + "V" + (height - d.target.y);
};

  
function getData() {
        return {  
            "name": "Level 1",
            "born": 1862,
            "died": 1906,
            "location": "Petersburg, VA",
            "color": "red",
            "parents": [
              {
                "name": "Level 2",
                "born": 1831,
                "died": 1884,
                "location": "Petersburg, VA",
                "color": "green",
                "parents": [
                  {
                    "name": "Level 3",
                    "born": 1781,
                    "died": 1871,
                    "location": "Ireland/Petersburg, VA",
                    "color": "green",
                    "parents": [
                    {
                        "name": "Level 4",
                        "born": 1781,
                        "died": 1871,
                        "location": "Ireland/Petersburg, VA",
                        "color": "blue"
                    },
                    {
                        "name": "Level 4",
                        "born": 1795,
                        "died": 1871,
                        "location": "Ireland/Petersburg, VA",
                        "color": "green"
                    }
                    ]
                  },
                  {
                    "name": "Level 3",
                    "born": 1795,
                    "died": 1871,
                    "location": "Ireland/Petersburg, VA",
                    "color": "red"
                  }
                ]
              },
              {
                "name": "Level 2",
                "born": 1826,
                "died": 1866,
                "location": "Brunswick/Petersburg, VA",
                "color": "blue"
              }
            ]
          };
};

.node {
  fill: steelblue;
  stroke: none;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Cluster layout</title>
</head>


<body>
</body>