d3.js 实现元素边框间沿四次曲线绘制带箭头连线问题求助

以下是三种可直接落地的实现方案：

• 方案1：调整箭头标记的refX属性（改动最小，适合快速验证）
  当前连线的起止点默认落在节点圆心，仅需要增大marker标记的refX数值，让箭头末端刚好停在节点边缘即可。你当前节点半径为1，将原代码中refX的赋值从5改为6即可适配：

.attr('refX',6)

• 方案2：偏移路径起止点（适合需要精准控制路径位置的场景）
  生成二次贝塞尔曲线路径时，将起止点沿着端点到控制点的方向向内偏移节点半径长度，让路径端点直接落在节点边框上，不需要调整箭头属性。修改后的mydraw函数代码如下：

var mydraw = function(d,i) {
  if (prev == null) {
    prev = d
    return ''
  }
  const nodeRadius = 1 // 对应你代码中节点的半径值
  var x1 = px(r,d)
  var y1 = py(r,d)
  var x2 = px(r,prev)
  var y2 = py(r,prev)
  var x3 = px(r*1.8,(prev+d)/2)
  var y3 = py(r*1.8,(prev+d)/2)

  // 计算起点偏移，往控制点方向缩进节点半径长度
  const dx1 = x3 - x1
  const dy1 = y3 - y1
  const len1 = Math.sqrt(dx1*dx1 + dy1*dy1)
  const startX = x1 + dx1 / len1 * nodeRadius
  const startY = y1 + dy1 / len1 * nodeRadius

  // 计算终点偏移，往控制点方向缩进节点半径长度
  const dx2 = x3 - x2
  const dy2 = y3 - y2
  const len2 = Math.sqrt(dx2*dx2 + dy2*dy2)
  const endX = x2 + dx2 / len2 * nodeRadius
  const endY = y2 + dy2 / len2 * nodeRadius

  var path = `M ${startX},${startY} Q ${x3},${y3} ${endX},${endY}`
  prev = d
  return path
}

• 方案3：使用D3内置的二次贝塞尔链接生成器（适合复杂节点连接场景）
  D3内置的d3.linkQuad()生成器原生支持自动偏移路径端点适配节点边框，只需要配置节点的位置和半径属性即可，无需手动计算路径坐标。

内容的提问来源于stack exchange，提问作者lucky1928