D3.js linkHorizontal() 随鼠标位置更新连线重复生成SVG问题

功能背景 #

正在实现带连接线的拖拽交互功能：

• 连接线起点坐标([x, y])在鼠标点击时采集
• 终点坐标([x, y])在元素拖拽过程中跟随鼠标位置实时更新
  项目采用Vue.js + VUEX技术栈，连接线绘制使用D3.js的linkHorizontal方法。
  主组件中预留的SVG挂载容器代码：

<div id="svg_lines"></div>

现有实现逻辑 #

在main.js中监听dragover事件获取当前鼠标位置（targetPos），从VUEX store中读取连线起点位置（sourcePos），传入connectTheDots(sourcePos, targetPos)方法绘制连线，对应实现代码：

new Vue({
  router,
  store,
  render: (h) => h(App),
  async created() {
    window.document.addEventListener('dragover', (e) => {
      e = e || window.event;
      var dragX = e.pageX, dragY = e.pageY;
      store.commit('setConnMousePos', {"x": dragX, "y": dragY});
      
      let sourcePos = this.$store.getters.getConnStartPos;
      let targetPos = this.$store.getters.getConnMousePos;

      // 绘制SVG连线
      connectTheDots(sourcePos, targetPos);
    }, false)
  },
}).$mount('#app');

connectTheDots()方法接收sourcePos和targetPos作为入参，预期实现D3 linkHorizontal连线终点位置的实时更新，现有代码如下：

function connectTheDots(sourcePos, targetPos) {
  const offset = 2;
  const shapeCoords = [{
    source: [sourcePos.y + offset, sourcePos.x + offset],
    target: [targetPos.y + offset, targetPos.x + offset],
  }];

  let svg = d3.select('#svg_lines')
    .append('svg')
    .attr('class', 'test_svgs');

  let link = d3.linkHorizontal()
    .source((d) => [d.source[1], d.source[0]])
    .target((d) => [d.target[1], d.target[0]]);

  function render() {
    let path = svg.selectAll('path').data(shapeCoords)
    path.attr('d', function (d) {
      return link(d) + 'Z'
    })
    path.enter().append('svg:path').attr('d', function (d) {
      return link(d) + 'Z'
    })
    path.exit().remove()
  }

  render();
}

故障现象 #

参考D3路径更新的通用实现思路修改代码后，功能未正常运行：触发拖拽时函数不会更新已有路径，反而会持续新增SVG元素。

• 运行效果截图：
• DOM结构截图：

问题根因 #

现有逻辑存在两处核心错误：

1. 每次触发更新都重复创建SVG画布：dragover事件会在鼠标拖拽移动时高频触发（每移动几像素就触发一次），而connectTheDots每次执行时都会运行d3.select('#svg_lines').append('svg')，直接往容器里插入全新的SVG标签，之前创建的SVG和路径完全不会被复用，这是DOM中堆积大量重复SVG元素、连线越画越多的直接原因。
2. DOM初始化与更新逻辑耦合：把SVG创建、连线生成器初始化这类只需要执行一次的逻辑，放在了高频触发的更新函数里，既造成DOM冗余，也带来了不必要的性能开销。

修复方案 #

把一次性初始化逻辑和高频更新逻辑拆分：初始化阶段只创建一次SVG画布和路径元素，拖拽触发时仅更新已有路径的d属性即可。
修复后参考代码：

// ========== 初始化逻辑：页面加载后仅执行一次 ==========
const lineContainer = d3.select('#svg_lines');
// 清空容器避免重复初始化
lineContainer.selectAll('svg.test_svgs').remove();
// 创建唯一的SVG画布
const svg = lineContainer.append('svg')
  .attr('class', 'test_svgs')
  .attr('width', window.innerWidth)
  .attr('height', window.innerHeight)
  .style('position', 'fixed')
  .style('top', 0)
  .style('left', 0)
  .style('pointer-events', 'none'); // 让SVG不阻挡鼠标事件
// 初始化连线生成器
const linkGenerator = d3.linkHorizontal()
  .source(d => [d.source[1], d.source[0]])
  .target(d => [d.target[1], d.target[0]]);
// 创建唯一的路径元素
const connPath = svg.append('path')
  .attr('fill', 'none')
  .attr('stroke', '#2563eb')
  .attr('stroke-width', 2);

// ========== 更新逻辑：拖拽时高频调用，仅更新路径属性 ==========
function connectTheDots(sourcePos, targetPos) {
  if (!sourcePos || !targetPos) {
    // 起点/终点不存在时隐藏路径
    connPath.attr('d', '');
    return;
  }
  const offset = 2;
  const lineData = {
    source: [sourcePos.y + offset, sourcePos.x + offset],
    target: [targetPos.y + offset, targetPos.x + offset],
  };
  connPath.attr('d', linkGenerator(lineData) + 'Z');
}

优化提示：dragover事件触发频率极高，可以给更新逻辑加requestAnimationFrame节流，避免不必要的DOM操作造成卡顿；拖拽结束后记得调用重置方法清空路径，避免连线残留。

内容的提问来源于stack exchange，提问作者J. Ken