d3.js连接多个可拖动的形状

Question

我是D3.js的新手，正在从事简单的D3.js项目，该项目需要连接多个可拖动的矩形。基本上，要用4条线连接5个矩形：https://codepen.io/marong125/pen/JmOqzL现在，我遇到了一些拖拽2个以上对象的麻烦，拖拽后它会折断。我的想法是将类设置为“目标”和“源”以生成如下代码：

     function drawLine () {
                    let preObj = scope.stateData[scope.stateData.length - 2];
                    let lineData = [
                        {x : parseInt(preObj.x) + 50, y : 25},
                        {x : parseInt(preObj.x) + 100, y : 25},
                    ]
                    scope.lines = svg.append('line')
                        .style('stroke', 'black')
                        .attr("stroke-width", 2)
                        .attr('id', 'line-' + preObj.id)
                        .attr('x1', lineData[0].x)
                        .attr('y1', lineData[0].y)
                        .attr('x2', lineData[1].x)
                        .attr('y2', lineData[1].y);

                        // console.log(scope.lines);
                        // console.log(lineData);
                }
and set on('drag', dragmove): 

  function dragmove(d) {
                d3.select(this)
                    .attr("x", d3.event.x)
                    .attr("y", d3.event.y);

                // console.log(d.id);
                // console.log(d3.select(this)[0][0].getAttribute('id'));

                let x = d3.event.x;

                let y = d3.event.y + 25;

                if (scope.lines != undefined) {
                    if (d3.select(this).attr('class') === 'source') {
                        scope.lines.attr("x1", x);
                        scope.lines.attr("y1", y);
                    } else {
                        scope.lines.attr("x2", x);
                        scope.lines.attr("y2", y);
                    }
                 }
              }

动态更改线坐标，但是这种方法效果不佳，有人可以为我提供更好的解决方案吗？非常感谢您！