D3+JavaScript+React 3D力导向图无法为边（link）正确添加标签问题求解

核心问题原因 #

你的代码主要存在3个导致边标签异常的错误：

• 错误地将文本直接绑定到<path>元素上，SVG沿路径显示文本必须使用<text> + <textPath>组合，引用对应路径的id才能渲染
• 为边同时定义了贝塞尔曲线、圆弧两套路径生成逻辑，实际显示的连线和标签参考路径错位
• 没有为标签设置居中、偏移、方向自适应属性，导致文字反向/被截断

具体修改步骤 #

1. 替换边与标签的初始化代码 #

找到你原来初始化edge、linkPath、textPath的代码段，整体替换为以下内容：

// 1. 先绘制显示用的边连线
const edge = svg
  .selectAll('path.link')
  .data(edges)
  .enter()
  .append("path")
  .attr("marker-mid", (d) => {
    switch (d.type) {
      case 'parent': {
        return 'url(#markerArrow)';
      }
      default: return 'url(#markerArrow)';
    }
  })
  .attr("stroke", "rgb(148,158,213)")
  .attr("stroke-width", (d) => d.weight)
  .style("fill", "none");

// 2. 创建隐形参考路径，供textPath使用，和连线用完全相同的生成逻辑
const edgeLabelPath = svg
  .selectAll('path.edge-label-path')
  .data(edges)
  .enter()
  .append("path")
  .attr("id", d => `edge-path-${d.source.index}-${d.target.index}`)
  .attr("fill", "none")
  .attr("stroke", "none") // 隐藏参考路径
  .attr("class", "edge-label-path");

// 3. 创建边标签文本，绑定参考路径
const edgeLabels = svg
  .selectAll('text.edge-label')
  .data(edges)
  .enter()
  .append("text")
  .attr("class", "edge-label")
  .attr("font-size", 10)
  .attr("fill", "#333")
  .attr("text-anchor", "middle") // 文字居中
  .append("textPath")
  .attr("href", d => `#edge-path-${d.source.index}-${d.target.index}`)
  .attr("startOffset", "50%") // 定位到路径中点
  .text(d => d.connectionType);

2. 统一ticked函数中的路径更新逻辑 #

删掉原来ticked函数中linkPath.attr("d")、textPath.attr("d")两行冗余逻辑，保留原来的贝塞尔曲线逻辑，新增参考路径同步更新：

function ticked() {
  textContainer
    .attr("transform", function(d: any) {
      return `translate(${d.x + 2}, ${d.y + 4})`;
    });

  node
    .attr("cx", function (d: any) {
      return d.x;
    })
    .attr("cy", function (d: any) {
      return d.y;
    });

  // 同步更新显示连线和标签参考路径的d属性
  const lineGenerator = line().curve(curveCardinal);
  edge.attr("d", function (d: any) {
    const mid = [
      (d.source.x + d.target.x) / 2,
      (d.source.y + d.target.y) / 2
    ];

    const index = d.overlap;
    const distance = Math.sqrt(
      Math.pow(d.target.x - d.source.x, 2) +
      Math.pow(d.target.y - d.source.y, 2)
    );
    const slopeX = (d.target.x - d.source.x) / distance;
    const slopeY = (d.target.y - d.source.y) / distance;
    const curveSharpness = 3.5 * index;
    mid[0] += curveSharpness * slopeY;
    mid[1] -= curveSharpness * slopeX;

    return lineGenerator([
      [d.source.x, d.source.y],
      mid,
      [d.target.x, d.target.y]
    ]);
  });
  // 参考路径和显示边用完全相同的路径
  edgeLabelPath.attr("d", edge.attr("d"));

  if (currentTarget) {
    const dist = currentTarget.r.baseVal.value + 3;
    const xPos = currentTarget.cx.baseVal.value + dist + 5;
    const yPos = currentTarget.cy.baseVal.value - dist + 35;

    card.attr("transform", `translate(${xPos}, ${yPos})`);
  }
}

3. 可选优化：避免文字反向 #

如果需要避免从右往左的路径上文字反转，可以在更新参考路径时判断起点终点位置，反转路径方向：

edgeLabelPath.attr("d", function(d) {
  const pathD = edge.filter(ed => ed === d).attr("d");
  // 如果源点x坐标大于目标点，反转路径方向避免文字反向
  if (d.source.x > d.target.x) {
    const parts = pathD.split(/[MLC]/).filter(Boolean).map(p => p.trim().split(',').map(Number));
    return `M${parts[2][0]},${parts[2][1]} L${parts[1][0]},${parts[1][1]} L${parts[0][0]},${parts[0][1]}`;
  }
  return pathD;
});

修改后边标签会自动居中显示在对应边的上方，随力导向图运动同步更新位置。

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