如何在svg形状对象移动时保持折线和svg形状对象连接

Question

我想使用折线连接两个svg形状对象。我逐个绘制两个svg形状对象，然后绘制该折线以连接这些形状对象。如果我移动一个svg形状对象，折线应该随附shape对象。绘制折线后应修复多边形和svg对象连接。

我画这样的形状

    var sampleSVG = svg;
          sampleSVG.append('circle')
          .attr('id', 'startcricle'+idstartelement++)
          .style("stroke", "black")
          .style("stroke-width", "1.5")
          .style("fill", "white")
          .attr('transform', 'translate(' + '100' + ',' + '100' + ')')
          .attr('r', '20')
          .on("mouseover",function(d){
           var t = d3.select(this).attr("id");

       function getScreenCoords(x, y, ctm) {
        var xn = ctm.e + x*ctm.a + y*ctm.c;
        var yn = ctm.f + x*ctm.b + y*ctm.d;
        return { x: xn, y: yn };
      }

      var circle = document.getElementById(t),
      cx = +circle.getAttribute('cx'),
      cy = +circle.getAttribute('cy'),
      ctm = circle.getCTM(),
      coords = getScreenCoords(cx, cy, ctm);
      if(arrowbuttonclick==1){
        startx=coords.x;
        starty=coords.y;
        arrowbuttonclick=2;
      }else if (arrowbuttonclick==2) {
        endx=coords.x;
        endy=coords.y;

        arrowpath(startx,starty,endx,endy);

        midx = startx+((endx-startx)/2);
        console.log("ok2")
        console.log(startx+","+starty+","+midx+","+starty+","+midx+","+endy+","+endx+","+endy)

  sampleSVG.append("polyline")      // attach a polyline
    .style("stroke", "black")  // colour the line
    .style("fill", "none")     // remove any fill colour
    .attr("points", startx+","+starty+","+midx+","+starty+","+midx+","+endy+","+endx+","+endy); 

    startx=0;
    starty=0;
    endx=0;
    endy=0;
    arrowbuttonclick=0;
  }
})
          .call(drag)

        });

当我点击线条按钮时，我改变了arrowbuttonclick = 1.选择svg形状后，它取坐标并绘制折线。

我是否需要删除当前的两个svg对象并使用折线创建新的svg对象来执行此任务，还是有任何简单的方法可以执行此操作？