最近嘗試自己弄一個流圖組件，然而畫出來的連線太糙了，找老司機指點下，該怎么優(yōu)化。

<!-- 繪制連線 -->
<g>
  <g v-for="(line, i) in lines" :key="i">
    <path :d="drawLine(line)" fill="none" marker-end="url(#arrow)" stroke-width="2px" />
  </g>
</g>

drawLine(line){
  let node1 = this.nodes[line[0]], node2 = this.nodes[line[1]];
  const MARGIN = 50;
  const NODE_LINE_GAP = 8; //當細線時為8，粗線時為16
  let startX = node1.x+node1.width;
  let startY = node1.y+(node1.height/2);
  let targetX = node2.x-NODE_LINE_GAP;
  let targetY = node2.y+(node2.height/2);
  let x1 = startX+MARGIN;
  let x2 = targetX-MARGIN;
  let y1 = startY;
  let y2 = targetY;
  let x3 = (x1+x2)/2;
  let y3 = y1;
  let x4 = (x1+x2)/2;
  let y4 = (y1+y2)/2;
  //(startX,startY)到(x1,y1)為直線,(x2,y2)到(targetX,targetY)為直線，中間為二次平滑貝塞爾曲線
  return `M ${startX},${startY} L ${x1},${y1} Q ${x3},${y3} ${x4},${y4} T ${x2},${y2} L ${targetX},${targetY}`;
}

連線的算法或path元素的樣式該怎么優(yōu)化好？